## PEMBUATAN WEBSITE SEKOLAH MENENGAH PERTAMA (SMP) NEGERI 12 SELUMA
Sapri 1 , Ferry Hari Utami 2
Dosen Tetap Fakultas Ilmu Komputer Universitas Dehasen Bengkulu

## ABSTRACT
Developments  in  science  and  technology  developed  in  line  with  the  progress  of  time  which  can support activities  undertaken  by  humans.  Computer  is  a human  creation,  combined  with science to  develop  in accordance with user needs.Website Creation SMP Negeri 12 Seluma menngunakan Adobe Dreamweaver CS.4 (2013).Tempat and Research Forum Time At SMP Negeri 12 Seluma, etode peneltitan is used in the method of observation,  and  interviews,  the  existing  problems  in  junior  high  is  still  menngunakan  Seluma  12  Board announcement,  speaking  from  mouth  to  mouth  in  informing  and  still  less  efficient  and  abstract This  study  aims  to  create  a  website  junior  high  school  (SMP)  State  of  science  and  technology development  in  line  with  the  progress  of  time  to  support  the  activities  of  12  Seluma  CS.4  using  Macromedia Dreamweaver.  This  research  is  done  for  5  month,  the  method  used  in  this  study  is  the  use  of  data  collection methods such as: methods of observation, interviews, and Stadi library. Applications used in the manufacture of SMP Negeri 12 Seluma website using Macromedia Dreamweaver CS.4, and language programs used are PHP programming and MySQL as the database that supports this application.
From the results of this study indicate that the website is very useful to reduce the lack of information about the school SMP Negeri 12 Seluma and within a certain time, so it does not necessarily have to come to a place of SMP Negeri 12 Seluma to get what is needed. Website SMP Negeri 12 Seluma should go online so that can be accessed anytime, anywhere, and by anyone and certainly through computers connected to the internet.

## INTISARI
Perkembangan  ilmu  pengetahuan  dan  teknologi  berkembang  sejalan  dengan  kemajuan  zaman  yang dapat mendukung aktivitas yang dilakukan oleh manusia. Computer merupakan ciptaan manusia yang dipadukan dengan ilmu pengetahuan sehingga berkembang sesuai dengan kebutuhan user. Pembuatan Website SMP Negeri 12 Seluma  menngunakan Adobe Dreamweaver CS.4 (2013),.Tempat dan Waktu  Dilakukan Pada SMP Negeri 12  Seluma,  Metode  yang  digunakan  dalam  peneltitan adalah  metode  observasi,  dan  wawancara,  masalah  yang ada  pada  SMP  negeri  12  seluma  ini  masih  menngunakan    Papan  Pengumuman,berbicara  dari  mulut  ke  mulut dalam penyampain informasi dan masih kurang efisien dan abstrak
Penelitian    ini  bertujuan  membuat  website  sekolah  menengah  pertama  (SMP)  Negeri  Perkembangan ilmu  teknologi  sejalan  dengan  kemajuan  zaman  untuk  mendukung  aktivitas  12  seluma  menggunakan Macromedia Dreamweaver CS.4 . metode yang digunakan dalam  ini adalah menggunakan metode pengumpulan data  seperti  :  metode  Observasi,  metode  wawancara,  dan  stadi  pustaka.  Aplikasi  yang  digunakan  dalam pembuatan website SMP  Negeri  12  Seluma  ini  menggunakan Macromedia  Dreamweaver  CS.4 ,  dan  bahasa program yang digunakan adalah pemograman PHP , dan MySQL sebagai database yang mendukung aplikasi ini. Dari  hasil    ini  menunjukan  bahwa Website sangat  berguna  untuk  mengurangi  keterbatasan  informasi tentang  sekolah  SMP  Negeri  12  Seluma  dalam  jarak dan  waktu tertentu,  sehingga  tidak  perlu  harus datang  ke tempat  SMP  Negeri  12  seluma  untuk  mendapatkan  apa  yang  dibutuhkan. Website SMP  Negeri  12  Seluma  ini harus  berjalan  secara online agar  bias  diakses  kapan  pun,dimana  pun,dan  oleh  siapapun  dan  tentunya  melalui computer yang terhubung ke internet.

## I. PENDAHULUAN

## A. Latar Belakang
Pada masa sekarang ini perkembangan informasi  sangat  lah  di  butuhkan  dengancepat dan  akurat,  dikarenakan  media  informasi  pada saat  sekarang  ini  sangatlah  banyak  dan  selalu terbaru  dalam  segala  informasi  yang  di sampaikan kepada masyarakat yang
membutuhkannya.
Salah  satunya  yaitu  internet,  yang mana  internet  pada  saat  sekarang  ini  sangalah mudah  untuk  menggunakannya  di  manapun dan  kapanpun.  Dan  berita  yang  di  sampaikan
selalu  terbaru  dan  tercepat  di  bandingkan  oleh media informasi yang lain. Dengan perkembangan  internet  yang  sangat  pesat  saat sekarang  ini  maka  segala  sesuatu  yang  ada  di dalam internet tersebut tidak lepas dari sebuah website.  Website  adalah  sekumpulan  halaman ( web  page )  yang  di  awali  dengan  halaman muka  ( home  page )  yang  mana  di  dalam website  tersebut  berisikan  informasi  dalam bentuk teks, sound,visual,animasi dan lain-lain.
Sekolah  menengah  pertama  Negeri  12 Seluma adalah salah satu lembaga Negeri yang bergerak dalam pendidikan. Dengan seiringnya perkembangan  zaman  dalam  bidang  ilmu pengetahuan  dan  teknologi  (IPTEK)  yang berpengaruh  dalam  bidang  informasi  berupa pengenalan  Sekolah  kepada  masyarakat  yang membutuhkan  akan  informasi  pendidikan  atau salah  satu  tempat  sekolah  yang  di  cari  oleh masyarakat  tetapi  susah  untuk  di  mencari informasinya yang berupa profile sekolah, visi dan  misi,  sekolah,  kegiatan  sehari-hari  dan semua yang berhubungan dengan pendidikan.
Informasi  tentang  sekolah  hanya  dapat  di peroleh  melalui  media  masa,  brosur  atau dengan  cara  langsung  datang  ke  sekolah  SMP Negeri 12 Seluma.

## B. Rumusan Masalah
Berdasarkan  latar  belakang  di  atas,
maka
penulis dapat merumuskan permasalahan,  adalah  Bagaimana  merancang Pembuatan    Website  Sekolah  Menengah Pertama(SMP) Negeri 12 Seluma Menggunakan  Adobe  Dreamweaver  CS.4, untuk dapat masyarakat luas bahkan dunia dan mempermudah  dalam  penyampaian  system informasi sekolah.

## C. Batasan Masalah
Mengingat lausnya permasalahan yang timbul  dalam    ini,    maka  di  perlukan  adanya suatu  bataasan  masalah.  Untuk  itu  penulis membatasi    ini  dengan  memfokuskan  pada informasi  pendidikan  yang  ada  pada  SMP Negeri  12  Seluma  menggunakan  adobe Dreamwaever CS4.

## D. Tujuan
Untuk  Pembuatan    Website  Sekolah Menengah Pertama(SMP) Negeri 12 Seluma Menggunakan Adobe Dreamweaver CS4.

## II. KAJIAN PUSTAKA

## A. Pengertian Internet
International network  (internet) adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-  jaringan  komputer  di  seluruh  dunia. (Dewanto,2006:3)
Internet adalah suatu  kumpulan jaringan komputer  dari  berbagai  tipe,  yang  saling berkomunikasi  dengan  menggunakan  suatu standar komunikasi. (Andi, 2003:1)
Berdasarkan  kedua  pendapat  di  atas dapat  disimpulkan  bahwa  internet  adalah sistem  komunikasi  global  yang  mampu menghubungkan komputer-komputer dan kumpulan  jaringan  dari  berbagai  tipe  dengan menggunakan suatu standar komunikasi.

## 1.  Pengertian Website
Website adalah keseluruhan halaman-halaman  Web  yang  terdapat  dari sebuah domain yang mengandung informasi. Sebuah website biasanya dibangun  atas  banyak  halaman  web  yang saling berhubungan. Hubungan antara satu halaman web yang lainnya disebut dengan hyperlink  sedangkan  teks  yang  dijadikan media media penghubung disebut Hypertext.

## a.  Upload File
Prosee Upload adalah memindahkan file dari lokal view ( komputer local) ke remote file ( web server). Anda dapat melakukannya secara langsung melalui panel files. Langkah-langkah mengupload wesite ke remote server adalah asebagai berikut :
1. Pada panel files, lihat tampilan local view,  maka  akan  di  tampilkan  site yang ada di computer local.
2. Seluruh file yang terdapat dalam site akan  di  transfer  ke  folder  public  _ html  di  server  melalui  FTP,  maka
pastikan  seluruh  file  sudah  benar sebelum proses dilakukan.
3. Klik  tombol  put  untuk  melakukan transfer  file  dari  computer  local  ke computer server.
4. Kemudian  secara  otomatis  koneksi menuju  remote  server  akan  di  buat, dan file akan di upload ke computer server. Pada  dasarnya,  terdapat  dua  cara dalam mengupload file yang bertujuan
untuk mem-publish situs, yaitu
menggunakan FTP ( file  transfer  protocol), dan menggunakan situs web hosting. Cara di atas adalah  menggunakan  FTP,  hal  itu di lakukan apabila anda memiliki domain sendiri dari server pribadi.
Sedangkan untuk upload file menggunakan hosting, anda dapat memilih  situs  web  hosting  yang  gratis seperti geocities (http//geocities
.yahoo.com/),  CJB  (  http//www.cjb.net), dan lain sebagainya. (hernita, 2009: 345).
b. Pengertian PHP dan MySQL
Script php ( php : hypertext preprocessor) merupakan bahasa
web server –side yang bersifat open source.  Bahasa  php  menyatu  dengan script  HTML  yang  sepenuhnya  di jalankan pada server.
Sedangkan  MySQL  adalah data  base  yang  menghubungkan script  PHP  menggunakan  perintah Query  dan  escape  character  yang sama  dengan  PHP.  PHP  memang banyak  mendukung  banyak  jenis data  base,  tetapi  untuk  membuat sebuah web yang dinamis dan selalu up  to  date,  MySQL  merupakan pilihan  data  base    tercepat  saat  ini. ( firdaus, 2007:2).
PHP (hypertext preprocessor)  merupakan  bahasa pemrograman   berbasis  web  yang mempunyai kemampuan untuk memproses  dan  mengolah  data secara  dinamis.  PHP  dapat  di katakan sebagai server-side
embedded  script  language,  artinya semua  sintaks  dan  perintah  program yang  anda  tulis  akan  sepenuhnya akan  di jalankan server,  tetapi dapat
di  sertakan  pada  halaman  HTL biasa. Pada umumnya, semua aplikasi yang di bangun menggunakan PHP akan memberikan hasil pada web browser,  tetapi  prosesnya  secara keseluruhan di jalankan pada server. ( Hermawan , 2007:3).

## c.  Sistem Komputer
1. Spesifikasi Hardware Menurut  Rizky  Dhanta  (5-
8:2009),  hardware  adalah  perangkat komputer  yang  terdiri  atas  susunan komponen-komponen elektronik berbentuk  fisik  (berupa  benda). Hardware  atau  perangkat  keras adalah  sebuah  alat  atau  benda  yang bisa  dilihat,  sentuh,  pegang  dan memiliki  fungsi  tertentu.  peralatan yang  secara  fisik  terlihat  dan  bisa diraba  atau  dipegang).  salah  satu komponen  dari  sebuah  komputer yang  sifat  alat  nya  bisa  dilihat  dan diraba oleh manusia secara langsung atau  yang  berbentuk  nyata,  yang berfungsi  untuk  mendukung  proses komputerisasi. Berdasarkan berbagai definisi  tersebut,  maka  disimpulkan bahwa  hardware  adalah  perangkat komputer yang berbentuk fisik yang dapat  digunakan  sebagai  alat  untuk memasukan  data,  infromasi  atau program ke dalam komputer. Perangkat  Hardware  terdiri  atas  3 jenis, yaitu:
1. Perangkat Masukkan ( Input device )
Perangkat  masukkan  berfungsi untuk  memasukkan  data,  baik berupa  teks,  foto,  maupun gambar  ke  dalam  komputer.
Contoh perangkat input misalnya keyboard, mouse, light-pen, scaner, dan sebagainya.
2. Perangkat  Keluaran  ( Output device ) Perangkat keluaran dipergunakaan untuk menampung dan menghasilkan  data  yang
dikeluarkan,  misalnya  monitor dan  printer. 3. Perangakat  Pengolahan  Data ( Processor )
Adalah alat pemprosesan atau pengolahan  data  dimana  instruksi- instruksi  program  diproses
untuk  mengolah  data  yang  sudah
dimasukkan  lewat  alat  input dan  hasilnya  akan  ditampilkan.  alat
pemprosesan terdiri dari Central  Processor Unit  ( CPU )  dan
Memori sebagai media penyimpanan data pada komputer.

## 2.  Spesifikasi Software
Menurut  Ali  Akbar  dan  Herwindo  ( 2005 : 12 )perangkat lunak (software) Merupakan program- program komputer yang memungkinkan  sebuah  komputer dapat  mejalankan  tugas  tertentu sesuai  dengan  yang  dikehendaki.
Program  tersebut  ditulis  dengan bahasa khusus yang dimengerti oleh komputer. Perangkat lunak (Software) dibagi  menjadi  tiga kelompok, yaitu : a. Sistem Operasi Sistem  operasi  adalah perangkat  lunak  sistem  yang bertugas untuk melakukan kontrol dan manajemen perangkat  keras  serta  operasi- operasai  dasar  sistem,  dimana seluruh aplikasi berjalan diatasnya.  Jadi  secara  umum, sistem  operasi  dalah  software pada  lapisan  pertama  yang ditaruh  pada  memori  komputer pada saat komputer dinyalakan.
Sedangkan  software  -  software lainnya dijalankan setelah sistem  operasi  berjalan,  dan sistem  operasi  akan  melakukan layanan inti umum untuk software - software itu. Layanan  inti  umum  tersebut seperti akses ke disk, manajemen  memori,  skeduling task,  dan  antar  –  muka  user. Sehingga  masing  –  masing
software tidak perlu lagi melakukan  tugas  –  tugas  inti umum  tersebut,  karena  dapat dilayani  dan  dilakukan  oleh sistem  operasi.  Contoh  sistem operasi  Dos,  Windows,  Linux, dan lain – lain.
b. Program Aplikasi
Program aplikasi merupakan perangkat lunak yang  dijalankan  oleh  para pengguna untuk mencapai tujuan tertentu, contohnya seperti Microsoft Word, Photoshop,  Corel  Draw  dan sebagainya. c. Bahasa Pemograman Bahasa pemograman merupakan bahasa yang
digunakan  untuk  menulis  / membuat  program  komputer,
dimana  dapat  menginstruksikan komputer untuk melakukan seperti komputasi dan mengorganisasikan aliran kontrol  antar  perangkat  yang ada.

## d. Teknik Pemograman
1. Program Aplikasi Adobe
Dreamwaever CS4 Adobe Dreamweaver CS4 adalah sebuah program aplikasi
yang di pergunakan untuk mendesain  halaman  wesite  secra  visual.
Kemahsyuran  tidak  terlepas  dari pesatnya kemajuan dunia internet sekarang ini. Internet pengembangan website, termasuk pembuatan halaman web serta pengelolahan sebsite.
Fasilitas  yang  ada  dalam  adobe Dreamweaver CS4   memberikan kemudahan  pada  user  untuk  melakukan pengeditan   desain web karena menampilkan secara visual. Pembahasan desain dan   fungsi  pada  halaman  web tid ak harus di tuliskan dalam satu baris kode, tetapi dapat dilakukan dengan menempatkan elemen yang ada, hanya  dengan  melakukan  drag
kedalam  dokumen  web  secara  langsung dan cepat.

## 2.  Mengenal Tampilan Adobe
Dreamweaver CS4
a. Memulai Adobe Dreamweaver CS4
Langkah- langkah memulai Adobe
Dreamweaver CS4 Yaitu :
1. Klik Start
2. Klik menu All Program
3. Klik Adobe Dreamweaver CS4
Gambar 2.1. Memulai Adobe Dreamweaver CS 4

## b. Membuka Dokumen Website
Langkah-langkah  untuk  membuka dokumen  website  menggunakan atar
page yaiti :
1. Pilih open pada star page
2. Tentikan Alamat file
3. Kemudian klik open
Gambar 2.2. Membuka Dokumen Website Pada  gambar  2.2  diatas  terdiri  dari open a Recent Item, Create New, Top
Features.
1. Open a Recent Item
Digunakan untuk membuka  file  yang  telah  ada  atau yang  pernah kita buat. 2. Create New
Digunakan untuk membuka halaman baru dan terdiri dari  HTML,  Coldpusion,  PHP, APS VBScript,XML, dan lain-lain. 3. Top Features Digunakan untuk membuka  halaman  atau  contoh desain website yang telah disediakan oleh adobe Dreamweaver CS4
c. Memahami Area  Kerja Adobe Dreamweaver CS4
Pada  area  kerja  Micromedia Dreamweaver  terdapat Insert  Bar, Dokumen  Windows,  panel  Groups, Tag selector,dan property Inspector.
Insert Bar  Dokument
Gambar 2.3 Area Kerja Adobe Dreamweaver CS4
Pada  Gambar  2.3 diatas terdapat bagia-bagian yaitu :
1. Insert Bar
Insest  Bar  merupakan  tool yang digunakan untuk untuk menyisipkan  objek  ke  dalam  web. Ada enam kelompok kategori yang digunakan  untuk  insert  bar,  yaitu Common,  Layout,  Form,  Text, HTML, dan aplikation yang masing-masing  memiliki  beberapa tool beserta kegunaannya. 2. Dokument Windows
Jendela  kerja  dokumen terdiri  atas  layer  kerja  serta fasilitasnya.  Yang    maksudnya dengan  fasilitas  adalah  tool  untuk mengatur  layer  kerja  atau  sering disebut  dokumen  toolbar,  antara lain  Coding  tool  Zoom  dan  Guide tool. Disamping document toolbar,tersedia  fasilitas  lain  yaitu Tag selection. 3. Panel Groups Panel pada Adobe Dreamweaver CS4 merupakan
suatu media yang berfungsi sebagai fasilitator. Kumpulan
berbagai panel disebut panel
Groups,  terletak  pada  sebelah kanan  layer  kerja.  Panel-panel kerja  tersebut  diantaranya  CSS, Aplication, Tag  Inspector, file  dan History  dan  Masing-masing  panel, dapat  memilihnya  dengan  cara mengklik nama panel.
4. Tag Inspector
Tag merupakan suatu kode dalam  Script  yang  menentukan format halaman web.
5. Property Inspector
Dalam dokumen web pasti terdapat text, image,  maupun table yang memiliki property/aturan dalam mengelolhanya. Untuk mengatur property-properti tersebut dengan menggunakan jendela property Inspector. Mengelola property dalam property inspector sangatlah mudah karena tinnggal memasukan  nilai-nilai  parameter yang  sudah  disediakan.  Secara umum  property  inspector  terdiri dari  page  property,  table  property, image property, dan from property.

## d. Menyimpan Dokumen
Untuk menyimpan dokumen  web  yang  baru  dibuat  dan belum  pernah  disimpan,  dilakukan dengan langkah-langkah berikit ini :
a. Klik menu file
b. Pilih submenu save as
Gambar 2.4 menyimpan Dokumen Website
c. Buat nama file
d. Klik tombol save untuk
menyimpan
e. Keluar dari Adobe Dreamweaver CS4
Langkah-langkah  untuk  keluar  dari dreamweaver cs4 a. Klick menu file, kemudian muncul dialog  box  seperti  gambar  2.5 berikut :
Gambar 2.5 keluar dari Adobe Dreamweaver CS4
b. klik exit

## e. Konsep Perancangan Database
Menurut  Andi  (  1994:  256)
Database adalah dasar data (Database)
merupakan  kumpulan  file-file  yang  saling berelasi  atau  berhubungan.  Relasi  tersebut bisa  di  tunjukan  dengan  kunci  dari  setiap file  yang  ada.  Satu  database
menunjukan  satu  kumpulan  data  yang dipakai dalam satu lingkup perusahaan atau instansi. Dalam  melakukan perancangan database  ada  beberapa  faktor  yang  menjadi kendala  yaitu  bagaimana  dapat memutuskan keperluan saat sekarang dan masa yang akan datang.
Dalam perancangan secara konseptual akan menunjukan entity
dan  relasi  berdasarkan  proses  yang  di lakukan  dan  diinginkan  organisasi.  Dalam menentukan entity dan relasinya dibutuhkan analisa data  dan  informasi  yang akan dilakukan dimasa mendatang. Didalam database ada beberapa istilah yang digunakan yaitu : a. Entity  adalah  orang,  tempat,  kejadian atau konsep yang informasinya direkam.
b. Antribute  yaitu  sebutan  untuk  mewakili entity,
c. Atribut  table  adalah  sebutan  yang mewakili suatu entity atau identik dengan mewakili istilah kolom data.
d. Field/Atribut  kunci,  setiap  file  terdpat kunci  dari  file  berupa  suatu  field  atau suatu  set  field  yang  dapat  mewakili record.
e. Candidat  key  (kunci  kandidat  /  kunci kolom ) adalah suatau attribute atau suatu set minimal attribute mengidentifikasikan secara  unik  suatu  kejadian  khusus  dari entity.
f. Primary  key  adalah  suatu  atribut  atau suatu  set  minimal  atribut  yang  tidak hanya  mengidentifikasikan  secara  unik suatu  kejadian  khusus,tetapi  juga  dapat mewakili suatu kejadian dari suatu entity.
g. Alternative  key  (kunci  alternative  ) adalah kunci kandidat yang tidak terpakai sebagai kunci primer,
h. Foreign  key  (  kunci  tamu  )  adalah  suatu attribute  atau  suatu  set  attribute  yang melengkapi suatu Relatonship ( hubungan ) yang menunjukan ke induknya.
Langkah-langkah  yang  harus  dibuat untuk menghasilkan sebuah relasi dengan menggunakan  teknik  normalisasi  yang terdiri dari 6 tahap :
a. Mengidentifikasikan dan menetapkan  seluruh  himpunan  entity yang akan terlibat. b. Menentukan atribut-atribut key dari masing-masing himpunan entitas.
c. Mengidentifikasikan dan
menetapkan  seluruh  himpunan  relasi diantara himpunan entitas yang ada
beserta foreign-keynya. d. Menentukan derajat dan cardinality
rasio relasi untuk setiap himpunan relasi. e. Menentukan partisipasion constrant dari suatu relasi untuk setiap
himpunan relasai.
f. Melengkapi himpunan relai dengan atribut –atribut yang bukan   kunci ( non-key).

## III. ANALISA DAN PERANCANGAN A. Subjek
ini dilakukan di Sekolah Menengah Pertama (SMP)  Negeri  12  Seluma  yang  beralamat  di  Jalan Raya Talang Kabu Kecamatan Ilir Talo Kabupaten Seluma.

## B. Metode
Adapun  metode    yang  digunakan  dalam penyusunan penelitian ini adalah dengan menggunakan  metode  pengembangan  sistem,
dimana  sistem  yang  selama  ini  digunakan  oleh SMP Negeri 12 Seluma.
4. Perangkat Lunak & Perangkat Keras
Adapun Software dan Hardware yang digunakan dalam  ini adalah :
a. Perangkat Lunak  ( Software )
Adapun software yang
digunakan dalam  ini adalah :
1. Sistem Operasi Windows XP.
2. Program  Aplikasi  adobe  Dreamweaver cs4 untuk pembuatan Website
3. PHP  dan  My  SQL  untuk  pembuatan Database.
b. Perangkat Keras (Hardware)
Adapun Hardware yang digunakan dalam  ini adalah
1. Processor Pentium IV dual core
2. RAM 1 gb
3. Harddisk 120 GB
4. Printer pixma MP258
5. Mouse dan Keyboard
6. Metode Pengumpulan Data
Metode pengumpalan data yang digunakan dalam  yaitu :
i. Metode Opservasi
Yaitu metode pengumpulan data dengan  cara  melakukan  pengamatan langsung,  yaitu  tentang  penyajian informasi yang dilakukan oleh Sekolah
Mengengah Pertama Negeri 12
Seluma.

## ii. Metode Wawancara
Yaitu metode pengumpulan data dengan  cara  melakukan  Tanya  jawab langsung kepada Bapak Sukiman,S.Pd, sebagai  salah  satu  staf  Sekolah Menengah Pertama Negeri 12 Seluma.
7. Metode Perancangan Sistem
i. Analisa Sistem Aktual
Sistem informasi yang selama  ini  digunakan  di  Sekolah Menengah  Pertama  Negeri  12 Seluma masih menggunakan manual  yaitu  dalam  penyajian  data dan  informasi  yang  berhubungan dengan  Sekolah  Menegah  Pertama
Negeri  12  Seluma.  Informasi  yang diberikan Sekolah kepada masyarakat hanya melalui pengumuman  di  media  cetak  dan disampaikan dengan cara
menyebarkan brosur.
Berdasarkan  pengamatan  yang telah dilakukan pada Sekolah Menengah Pertama  Negeri  12  Seluma  dalam penyajian  data  dan  informasi  belum efektif    dan  efisien  karena  belum mempunyai suatu system.
Maka dalam  ini akan dirancang dan  dibangun  dengan  sebuah  website, dimana  data  dan  informasinya  dapat disajikan  secara  on  line,  mudah  dan dapat diakses oleh masyarakat kapanpun dan dimanapun.

## ii. Perancangan Sistem Baru
Sistem  yang  akan  dibangun adalah  sebuah  sistem  penjualan berbasis  web,  menggunakan  jasa internet untuk Memberikan informasi-informasi  sekolah    yang bertujuan untuk
meningkatkan efektifitas  dari  sistem  yang  sudah ada . Pada perancangan sistem baru ini akan menggunakan data-data yaitu berupa data:

## C. Data Flow Diagram (DFD)
Data  Floe  Diagram  (DFD)  adalah sebuah  alat  yang  menggambarkan  aliran data  sampia  sebuah  system  selesai,dan kerja  atau  proses  dilakukan  dalam system tersebut.
Pada  tahap  analisis,  penggunaan notasi  symbol  dan  anak  panah  untuk mewakili penggambaran arus data dalam perancangan  system  sangat  membantu dalam  komunikasi  dengan  pemakaian system  untuk  memahami  sistem  secara logik.  Diagram  yang  menggunakan notasi-notasi ini
adalah untuk
menggambarkan  arus  dari  data  sistem dikenal dengan nama data flow diagram atau diagram alur data. DFD merupakan alat  yang  digunakan  dalam  metodelogi
pengembangan  sistem  yang  terstruktur dan  juga  merupakan  dokumentasi  dari sistem yang baik. Beberapa symbol yang digunakan pada DFD adalah seperti pada table 2.1.
Table 3.1. Notasi/symbol DFD
Simbol Gane and Searson Simbol Yourdan Keterangan Notasi kesatuan luas DFD Arus Data Notasi Proses Notasi Simpan Data
Keterangan :
a. External Entity ( kesatuan Luar ) Digunakan  untuk  memisahkan  suatu system dengan lingkungan luarnya.
b. Data Flow (arus data) Menunjukan  arus  data  yang  berupa nasukan  untuk  system  atau  hasil  dari proses system.
c. Proses (proes)
Menunjukan  kegiatan  perubahan  alir data yang masuk ke dalam proses untuk dihasilkan  arus  data  yang  akan  keluar dari proses.
d. Data Store ( notasi simpan data ) Merupakan  media  penyimpanan  data, yang di gunakan untuk menyimpan ahir hasil  aliran  data  dari  sebuah  sumber pemrosesan data sampai dengan sebuah proses data  lain membutuhkannya.
1. Diagram Konteks
ADMIN 0.0 Website SMPN 12 Seluma PENGUNJUNG SEKOLAH Data Sekolah Data Kelas Data Siswa Data Guru Data Alumni Informasi Sekolah Informasi Siswa Informasi Guru Informasi Alumni Informasi Sekolah Informasi Kelas Informasi Siswa Informasi Guru Informasi Alumni
Gambar 3.1. Diagram Konteks

## 2. Diagram Level Nol
Data Sekolah 1.0 Proses Input Data LAPORAN Data Sekolah Data Kelas Data Siswa Data Guru Data Alumni Laporan Sekolah Laporan Kelas Laporan Siswa Laporan Guru Laporan Alumni Data Kelas Data Siswa Data Guru Data Alumni 2.0 Proses Pembuatan Laporan Sekolah Kelas Siswa Guru Alumni

## Gambar 3.2. Diagram Level Nol
3. Diagram Detail Sekolah Kelas Siswa Guru Alumni Input Data Sekolah Input Data Kelas
Input Data Siswa Input Data Guru Input Data Alumni Sekolah Kelas Siswa Guru Alumni Data Sekolah Data Kelas Data Siswa Data Guru Data Guru Data Siswa Data Kelas Data Alumni
Gambar 3.3. Diagram Detail
D. HIPO ( Hierarki Plus Input Proccess and
output )
Merupakan alat okumentasi program yang dikembangkan dan didukung oleh IBM ,tetapi kini HIPO juga telah  digunakan  sebagai  alat  bantu  untuk merancang dan mendokumentasikan siklus pengembangan sistem .
HIPO dirancang dan dikembangkan secara khusus untuk menggambarkan  suatu  struktur  bertingkat guna memahami fungsi dari modul-modul suatu sistem ; HIPO juga dirancang untuk menggambarkan modul-modul yang harus diselesaikan oleh pemrogram . HIPO tidak dipakai  untuk  menunjukkan  instruksi- instruksi  program  yang  akan  digunakan, HIPO juga
dirancang untuk menggambarkan modul modul yang harus diselesaikan  oleh  pemrogram.  Ada  pun Tampilan Gambarnya sebagai 3.5 berikut:
Sistem Website SMPN 12 Seluma Proses Input Laporan Output Data Proses Input Input Data Siswa Input Data Kelas Input Data Sekolah Input Data Guru Laporan Output Data Laporan Siswa Laporan Kelas Laporan Sekolah Laporan Guru Input Data Alumni Laporan Alumni Gambar 3.4 Hierarki Plus Input Proccess and output (HIPO)
E. ERD ( Entity Relationship Diagram) ERD (Entity Relationship Diagram)  adalah  gambaran  mengenai berelasinya antar entitas. . Komponen-komponen
ERD
Entitas dan Atribut adalah segala sesuatu yang  dapat  digambarkan  oleh  data.
Entitas  juga  dapatdiartikan  sebagai individu  yang  mewakili  sesuatu  yang nyata (eksistensinya) dan
dapatdibedakan  dari  sesuatu  yang  lain (Fathansyah,  1999).  Ada  dua  macam entitas  yaitu  entitaskuat  dan  entitas lemah.  Entitas  kuat  merupakan  entitas yang  tidak  memiliki  ketergantungan dengan  entitas  lainnya.  Contohnya entitas anggota. Sedangkan entitas lemah merupakan  entitas  yang  kemunculannya
tergantung pada keberadaaan entitas lain dalam suatu relasi.
Adapun Tampilannya sebagai 3.5
berikut:
Sekolah Kelas Guru Siswa memiliki memiliki 1 M 1 M mengajar 1 M NSS Nm_Sklh Almt Thn_Didirikan Thn_Oprsi Stts_Tnh Ls_Tnh Ls_Bggnan Srt_Izin No_Rek NSS Kd_Kelas Kelas Nm_Sklh Jmlh_siswa Kd_Kelas Kd_Kelas NISN Nm_Siswa Kelas Tgl_Lhr Tmpt_Lhr Jns_Kel Almt Nm_Ortu Krj_Ortu Ket NISN NISN NIP Nm_Guru Jns_kel Tmpt_Lhr Tgl_Lhr Gol Ijazah Jurusan Tgs_Ajar Jam_Ajar NIP

## Gambar 3.5 Entity Relationship Diagram (ERD)
F. Rancangan File 1. File Data Sekolah Nama File : Sekolah Primary Key : NSS Tabel 3.2 Tabel Data Sekolah Field Name Type Wi dth Descriptio n NSS Nm_Sklh Almt Thn_Didiri kan Thn_Oprsi Stts_Tnh Ls_Tnh Ls_Bnggn an Srt_Izin No_Rek INT Varch ar Varch ar Varch ar Varch ar Varch ar Varch ar Varch ar Varch ar Varch ar 12 25 30 4 4 10 6 6 15 20 No Staistik Sekolah Nama Sekolah Alamat Tahun Didirikan Tahun Beroperasi Status Tanah Luas Tanah Luas Bangunan Surat Izin Nomor Rekening
2. File Data Kelas
Nama File : Kelas Primary Key : Kd_Kelas Tabel  3.3 Tabel Data Kelas Field Nama Type Widt h Descripti on Kd_Kelas Kelas Nm_Seko lah Jml_siswa Int Varch ar Varch ar Varch ar 10 40 03 02 Kode Kelas Kelas Nama Sekolah Jumlah Siswa 3. File Data Siswa Nama File :Siswa Primary Key  : Kd-Siswa Table 3.4 Tabel Data Siswa Field Nama Type Width Description Kelas Nm_Siswa NISN
Tgl_Lahir Tmpt_Lahi r
Jns_Kelami n
Almt Nm_Ortu Krj_Ortu
Keterangan Varchar Varchar Varchar Date Varchar Varchar Varchar Varchar Varchar Teks 10 25 15 10 25 8 40 20 15 - Kelas Jumlah Siswa Nomor Induk
Siswa Tanggal Lahir Tempat Lahir Jenis Kelamin Alamat Nama Orang Tua
Kerja Orang Tua Keterangan 4. File Admin Nama File : Admin Tabel 3.5 Tabel Admin Field Nama Type Widt h Descripti on Nama Passwo rd Varch ar Varch ar 25 15 Nama Admin Password Admin
5. File Data Guru Nama File : Guru Primary key : NIP Tabel 3.6 Tabel Data Guru Field Nama Type Widt h Des cri ptio n NIP Nm_Guru Jns_Kel Tmpt_Lhr Tgl_Lhr Gol Ijazah Jurusan Tgs_Ajar Jam_Ajar Int Varch ar Varch ar Varch ar Date Varch ar Varch ar Varch ar Varch ar Varch ar 16 25 1 30 8 4 15 20 25 3 Nomor Induk Pegawai Nama Guru Jenis Kelamin Tempat Lahir Tanggal Lahir Golongan Ijazah Jurusan Tugas Mengajar Jam Mengajar 6. File Tamu Nama File : Tamu Tabel 3.7 Tabel Data Tamu Field Nama Type Width  Description Nama Email Pesan Varchar Varchar Text 25 50 - Nama Tamu Email Tamu Komentar Tamu 7. File Data Alumni Nama File :Alumni Primary Key  : Kd-Alumni Table 3.8 Tabel Data Alumni Field Nama Type Width Descrip tion Nm_Alum ni NISN Tgl_Lahir Tmpt_Lahi r Jns_Kelam in Almt Nm_Ortu Krj_Ortu Keteranga n Varchar Varchar Date Varchar Varchar Varchar Varchar Varchar Teks 25 15 10 25 8 40 20 15 - Jumlah Siswa Nomor Induk Siswa Tangga l Lahir Tempat Lahir Jenis
Kelami n Alamat Nama Orang Tua Kerja Orang Tua
Keteran gan

## E. Rancangan Input
a. Input Data Sekolah Pada menu Input Data Sekolah
terdapat  sepuluh  sub  menu  yaitu, NSS,  Nama  Sekolah,  Alamat,  Tahun didirikan,  Tahun  Dioprasikan,  Status Tanah,  Luas  Tanah,  Luas  Bangunan, Surat  Izin  dan  Nomor  Rekening. Dimana  bila  di  klik  tombol  dari masing-masing  menu  tersebut  akan muncul  tampilan  dari  masing-masing sub tersebut.
Tampilan  menu  input  Data siswa  dapat  dilihat  pada  gambar  3.6 sebagai berikut:
NSS Nama Sekolah Alamat Tahun Didirikan Tahun Dioperasikan Status Tanah Luas Tanah Luas Bangunan Surat Izin Nomor Rekening : : : : : : : : : :
9999999999
XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
9999 9999 XXXXXXXXXXXX 99999 M2 99999 M2 XXXX99XXXX 99999999999999 SIMPAN INPUT DATA SEKOLAH NSS EDIT HAPUS
9999999999 Klik Klik 9999999999 Klik Klik
Gambar 3.6. Rancangan Input
Data Sekolah
b. Input Data Kelas
Pada  menu  input  data  kelas terdapat  empat  sub  menu  yang terdiri  dari:  kode  kelas,kelas,nama sekolah,dan  jumlah  siswa.  Bila  di klik  tombol  dari  ke  empat  sub terseut maka akan muncul tampilan dari  bagian  masing-masing  sub tersebut.  Tampilan  dari  sub-sub tersebut  dapat  di  lihat  pada  gambar 3.7 sebagai berikut:
Kode Kelas Kelas Nama Sekolah Jumlah Siswa : : : : 999 XXXX XXXXXXXXXXXXXXXXXXXX 9999 SIMPAN INPUT DATA KELAS KELAS EDIT HAPUS XXXX
Klik Klik XXXX Klik Klik ê Gambar 3.7. Rancangan Input
Data Kelas
c. Input Data Siswa
Pada  menu  input  data  siswa
terdapat sepuluh sub menu yang terdiri dari: kelas, NISN, Nama siswa, tempat lahir,  tanggal  lahir  ,jenis  kelamin, alamat, nama ortu, pekerjaan ortu, dan keterangan. Bila di klik tombol dari ke sepuluh sub terseut maka akan muncul tampilan  dari  bagian  masing-masing sub  tersebut.  Tampilan  dari  sub-sub tersebut dapat di lihat pada gambar 3.8 sebagai berikut:
d. Input Data Guru Pada  menu  input  data  siswa
terdapat sepuluh sub menu yang terdiri dari: NIP, Nama
Guru,
Jenis kelamin,tempat lahir,tanggal lahir,
Golongan  ,Ijazah,  jurusan,  Tugas mengajar,  dan  jam  mengajar.  Bila  di klik tombol dari ke sepuluh sub terseut maka  akan  muncul  tampilan  dari bagian  masing-masing  sub  tersebut. Tampilan  dari  sub-sub  tersebut  dapat di  lihat  pada  gambar  3.9  sebagai berikut:
NIP Nama Guru Jenis Kelamin Tmpt Lahir Tanggal Lahir Golongan Ijazah Jurusan Tugas Mengajar : : : : : : : : : 9999999999999999 XXXXXXXXXXXXXXXXXXXXXXXXX XX XXXXXXXXXXXXXXXXXXXXXX 99-99-9999 XXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXX SIMPAN INPUT DATA GURU NIP EDIT HAPUS
9999999999 Klik Klik
9999999999
Klik Klik Jam Mengajar : 99999
Gambar 3.9. Rancangan Input Data Guru
e. Input Data Tamu Pada  menu  input  data  Tamu berisikan  form  input  yang  berfungsi untuk para pengunjung dalam
memberikan  komentar-komentar  yang membangun. Tampilan input data tamu ini  dapat  dilihat  pada  gambar  3.10 berikut:
XXXXXXXXXXXXXXXXXXXXX Nama Email xxxxxxxxxxxxxx@xxxxxx.com KIRIM Nama Komentar XXXXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXX : : INPUT DATA TAMU XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Komentar :

## DAFTAR KOMENTAR PENGUNJUNG
Email xxxxxx@xxxx.com xxxxxx@xxxx.com

## Gambar 3.10. Rancangan Input
Data Tamu
f. Input Data Admin
Pada  menu  input  data  admin terdapat  dua  sub  menu  yaitu:  user name,dan passwork.untuk menampilkan  dua  sub  tersebut  klik pada tomb masing-masing sub tersebut.  Input  data    admin  dapat dilihat pada gambar 3.11.
User Name Password : : XXXXXXXXXXXXXXX XXXXXXXXXX MASUK INPUT DATA ADMIN BATAL Gambar 3.11. Rancangan Input Data
Admin
g. Input Data Alumni
Pada  menu  input  data  Alumni terdapat Sembilan sub menu. Bila di klik tombol  dari  ke  Sembilan  sub  tersebut maka akan  muncul tampilan dari bagian masing-masing  sub  tersebut.  Tampilan dari sub-sub tersebut dapat di lihat pada gambar 3.12 sebagai berikut:
NISN Nama Siswa Tmpt Lahir Tanggal Lahir Jenis Kelamin Alamat Nama Ortu Pekerjaan Ortu :
:
: : : : : : 9999999 XXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXX
99-99-9999 XX XXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXX SIMPAN INPUT DATA ALUMNI NISN EDIT HAPUS 9999999999
Klik Klik 9999999999 Klik Klik Keterangan : XXXXXXXXXXXXXXXXXXXXXXXXX
Gambar 3.12. Rancangan Input Data
Alumni

## F. Rancangan Struktur Menu
Gambar 3.13. Rancangan Struktur Menu

## G. Rancangan Menu Tampilan
a. Rancangan Menu Utama
Pada  menu  home  terdapat  beberapa sub menu yaitu, profil, Galeri,Informasi,Data Siswa, Data Guru,Nilai siswa,dan buku tamu. Sub  menu  profil  terdiri  dari  Foto-foto Sekolah,  foto  Kepala  sekolah  Dan  kata Sambutan Dari kepala sekolah.
Pada  sudut  kiri  atas  terdapat  gambar logo dari Sekolah Menengah Pertama (SMP) Negeri  12  Seluma,  dan  pada  atas  tampilan terdapat  judul  Nama  Sekolah  Menengah Pertama (SMP) Negeri 12 Seluma. Tampilan menu  home  dapat  dilihat  pada  gambar  3.14 sebagai berikut:

## Gambar 3.14. Rancangan Menu Utama
b. Rancangan Menu Profile Pada  menu  profil  terdiri  dari  enam pilihan  yaitu,  Sejarah,Data  Sekolah,Stuktur Organisasi  ,Visi  &  Misi,Prestasi,Sarana  & Prasarana.
Pada saat diklik tombol sejarah maka akan  tampil  sejarah  dari  SMP  Negeri  12 Seluma,kemudian kalau di klik tombol data sekolah  maka  akan  muncul  data  sekolah SMP  Negeri  12  Seluma,Kemudian  kalau diklik  tombol  Struktur  Organisasi  maka akan  muncul  struktur  organisasi  pada  SMP Negeri  12  Seluma,  Kemudian  kalau  di  klik tombol  visi  &  misi  maka  akan  muncul  visi &  misi  SMP  Negeri  12  Seluma,kemudian kalau  di  klik  tombol  Prestasi  maka  akan muncul  prestasi  SMP  Negeri  12  Seluma, kamudian  kalau  di  klik  tombol  sarana  & prasarana  maka  akan  muncul  sarana  &
Profile  Galler y Inform asi Data Siswa Data Guru Buku Tamu Admin Sejarah Sekolah Data Sekolah Struktur Organisasi Prestasi Foto Sekolah Foto Kegiata n Visi & Misi Siswa /Kelas Rekap Siswa Menu Utama
Sarana  & Prasarana Data Alumni
prasarana SMP Negeri 12 Seluma, Tampilan  menu  Profile  dapat  dilihat  pada gambar 3.15 sebagai berikut:

## Gambar 3.15. Rancangan Menu Profile
c. Rancangan Menu Galeri
Pada  Menu  Galeri  ini  terdapat  Foto- foto sekolah dan foto kegiatan sekolah.
Tampilan  Menu  galeri  ini  dapat  di lihat pada gambar 3.16 berikut:
Gambar 3.16. Rancangan Menu Galeri

## Gambar 3.16. Rancangan Menu Informasi
d. Rancangan Menu Informasi Pada  menu  informasi  berisikan tentang  informasi-informasi  terkini  SMP
Negeri  12  Seluma  ,  misalnya  tentang Pendaftaran  Siswa  baru,    SMP  Negeri  12 Seluma  dan  lain  sebagainya.  Tampilan
menu  informasi  dapat  dilihat  pada  gambar 3.17 berikut.
Gambar 3.17. Rancangan Menu Informasi
e. Rancangan Menu Data Siswa Pada menu profil terdiri dari Dua pilihan yaitu,  Data  Siswa  Perkelas,Dan  Rekapitulasi data siswa SMPN 12 Seluma.
Tampilan  Rancangan  Menu  Data  Siswa dapat dilihat pada Gambar 3.18 berikut:
Gambar 3.18. Rancangan Menu Data Siswa
f. Rancangan Menu Data Guru
Pada rancangan menu data Guru ini terdapat tentangidentitas Guru tersebut,seperti: NUPTK,Nama Guru,Jenis kelamin,TTL,Tamat Sekolah,Masa Kerja,Ijazah,Alamat dan keterangan.
Tampilan Rancangan menu data guru dapat dilihat pada gambar 3.19 berikut:
Gambar 3.19. Rancangan Menu Data Guru
g. Rancangan Menu Buku Tamu
Pada Menu Buku Tamu berisikan Form input yang berfungsi untuk para pengunjung dalam memberikan saran maupun kritik yang membangun.
Di halaman buku tamu ini juga terdapat daftar pengunjung yang sudah mengisi form buku tamu.
Tampilan Rancangan menu buku tamu ini dpat dilihat pada gambar 3.20  berikut:

## Gambar 3.20. Rancangan Menu Buku Tamu
h. Rancangan Menu Admin
Pada  menu  data  terdapat  Tujuh  buah pilihan  yaitu,  data  Sekolah,Data  Kelas,Data Siswa,Data  Guru,Data  Nilai,Data  Admin  dan Data Tamu.
Untuk  menampilan  tiap  pilihan  pada menu  data  tersebut  klik  pada  tombol  masing- masing  pilihan  tersebut.  Rancangan  menu  data dapat dilihat pada gambar 3.21

## Gambar 3.21. Rancangan Menu Admin

## 4. Rancangan Pengujian
Dalam  perancangan  pengujian  atas website  yang  akan  dibuat,  nantinya  akan melalui  tahapan  Pengujian  Alpha  Testing, Alpha testing adalah pengujian yang dilakukan oleh  pemakai  padalingkungan  pengembang, dalam  hal  ini  lingkungan  yang  terkendali.. Pada tahapa ini proses akses website dilakukan dengan  menggunakan  server  localhost  dengan browser  internet  explorer.  Jika  pada  tahap  ini tidak  ditemukan  kendala  pada  sistem  kerja website maka akan dilanjutkan dengan tahapan uji  coba  kedua.  Uji  coba  website  dengan melibatkan  Unit  Pelaksana  Program  Keluarga Harapan  (UPPKH)  Kabupaten  Seluma  untuk secara  bersama  melakukan  evaluasi  terhadap kelemahan  serta  kekurangan  sistem  website sebagai tahapan dalam perbaikan sistem.

## IV. HASIL DAN PEMBAHASAN A.  Hasil
1. Tampilan Menu Utama
Pada  menu  home  terdapat  beberapa sub  menu  yaitu,  profil,  Galeri,  Informasi, Data  Siswa,  Data  Guru,  dan  buku  tamu.  Sub menu profil terdiri dari Foto-foto
Sekolah,foto  Kepala  sekolah  Dan  kata Sambutan Dari kepala sekolah.
Pada  sudut  kiri  atas  terdapat  gambar logo dari Sekolah Menengah Pertama (SMP) Negeri  12  Seluma,  dan  pada  atas  tampilan terdapat  judul  Nama  Sekolah  Menengah Pertama (SMP) Negeri 12 Seluma. Tampilan menu home dapat dilihat  pada gambar 4.1 di bawah ini.

## Gambar 4.1 Tampilan Menu Utama

## 2.  Tampilan Menu Profile
Pada menu profile terdapat 6 sub menu atau  pilihan-pilihan  yang  mempunyai  fungsi untuk  melihat  sejarah,data  sekolah,struktur organisasi,  visi  &  misi,  Prestasi,  sarana  dan prasarana.  Untuk  melihat  ke  enam  6 tersebut tinggal  klik  dari  menu  tersebut.  Tampilan menu  profile  ini  dapat  dilihat  pada  gambar 4.2 dibawah ini.
Gambar 4.2 Tampilan Menu Profile

## a. Tampilan Sub Menu Sejarah
Pada  menu  profile  terdapat menu  sejarah  yang  jika  anda  ingin melihat  sejarah  pada  SMP  Negeri  12 Seluma  maka  cukup  klik  menu  sejarah pada  menu  profile,maka  tentang  sejarah berdirinya  SMP  Negeri  12  Seluma, Tampilan  menu  sejarah  ini  dapat  dilihat pada gambar 4.3. di bawah ini.

## Gambar 4.3. Tampilan Menu
Sejarah

## b. Tampilan Sub Menu Data Sekolah
Pada  menu  profile  terdapat  menu  data  sekolah yang  jika  anda  ingin  melihat  data tersebut  maka  cukup  klik  menu  data sekolah  pada  menu  profile,disana  akan tampil sekilas tentang data sekolah SMP Negeri  12  Seluma,  Tampilan  menu  data sekolah  ini  dapat  dilihat  pada  gambar 4.4. di bawah ini.

## Gambar 4.4 Tampilan Sub Menu Data Sekolah

## c. Tampilan Sub Menu Struktur Organisasi
Pada  menu  profile  terdapat  menu struktur  organisasi  yang  jika  anda  ingin melihat menu tersebut maka cukup klik menu struktur  organisasi  pada  menu  profile,disana akan tampil sekilas tentang struktur organisasi SMP Negeri 12 Seluma, Tampilan menu  struktur  organisasi  ini  dapat  dilihat pada gambar 4.5. di bawah ini.
Gambar 4.5 Tampilan Menu Struktur
Organisasi
d. Tampilan Sub Menu Visi & Misi
Pada  menu  profile  terdapat menu  visi  &  misi  yang  jika  anda  ingin menuju  menu  tersebut  maka  cukup  klik menu visi & misi pada menu profile,disana akan tampil sekilas tentang  visi  &  misi  SMP  Negeri  12 Seluma,  Tampilan  menu  visi  &  misi  ini dapat dilihat pada gambar 4.6. di bawah ini.

## e. Tampilan sub Menu Prestasi
Pada  menu  profile  terdapat menu  prestasi  yang  jika  anda  ingin menuju  menu  tersebut  maka  cukup  klik menu  prestasi  pada  menu  profile,disana akan tampil tentang prestasi SMP Negeri 12  Seluma,  Tampilan  menu  prestasi  ini dapat dilihat pada gambar 4.7. di bawah ini.
Gambar 4.6. Tampilan Sub Menu
Prestasi

## f. Tampilan sub menu sarana dan prasarana
Pada  menu  profile  terdapat  menu sarana  dan  prasarana    yang  jika  anda  ingin menuju  menu  tersebut  maka  cukup  klik  menu sarana  dan  prasarana  pada  menu  profile,maka akan  tampil  tentang  prestasi  SMP  Negeri 12Seluma, Tampilanmenu sarana dan prasarana  dapat  dilihat  pada  gambar  4.8.  di bawah ini.

## Gambar 4.8. Tampilan Sub Menu Sarana Dan Prasarana

## 3. Tampilan Menu Galeri
Pada  Menu  Galeri  ini  terdapat dua  sub  menu  yaitu  :  foto  sekolah  dan foto  kegiatan  sekolah,  yang  mana  jika kita  ingin  melihat  tampilan  pada  menu galeri  ini  maka  kita  cukup  mengklik menu  galeri  tersebut.  Tampilan  menu galeri  tersebut  dapat  dilihat  pada tampilan gambar 4.9 di bawah ini.
Gambar 4.9. Tampilan Menu Galeri
1. Tampilan Sub Menu Foto Sekolah
Pada  Menu  tampilan  Foto sekolah  ini  berisikan  foto-foto  tentang sekolah,  yang  mana  jika  kita  ingin melihat  tampilan  pada  menu  foto sekolahi  ini  maka  kita  cukup  mengklik menu  tersebut.  Tampilan  menu  foto sekolah tersebut dapat dilihat pada
Gambar 4.10. Tampilan Sub Menu Foto

## Sekolah

## 2. Tampilan Sub Menu Foto Kegiatan Sekolah
Pada  tampilan  Menu  Foto  kegiatan sekolah  ini  berisikan  foto-foto  tentang kegiatan  sekolah  dan  piala  sekolah,  yang mana  jika  kita  ingin  melihat  tampilan  pada menu  tampilan  foto  kegiatan  sekolah  ini maka  kita  cukup  mengklik  menu  tersebut. Tampilan  menu  foto  kegiatan  sekolah tersebut dapat dilihat pada tampilan gambar 4.11 di bawah ini.
Gambar 4.11. Tampilan Sub Menu Foto
Kegiatan Sekolah

## 3.  Tampilan Menu Informasi
Pada  tampilan  Menu  informasi ini berisikan informasi tentang kelulusan  hasil  ujian  Nasional  (UN), yang  mana  jika  kita  ingin  melihat tampilan  pada  menu  informasi  ini  maka kita  cukup  mengklik  menu  informasi tersebut. Tampilan menu informsi tersebut  dapat  dilihat  pada  tampilan gambar 4.12 di bawah ini.

## Gambar 4.12. Tampilan Menu Informasi

## 4. Tampilan Menu Data Siswa
Pada  tampilan  Menu  Data  Siswa ini  terdapat  Tiga  (3)  sub  menu  yaitu  : Data siswa per kelas, Rekap Data siswa, Dan  Data  Alumni,    yang  mana  jika  kita ingin  melihat  tampilan  pada  menu  Data Siswa  ini  maka  kita  cukup  mengklik menu  Data  Siswa  tersebut.  Tampilan menu  Data  Siswa  tersebut  dapat  dilihat pada tampilan gambar 4.13 di bawah ini.
Gambar 4.13. Tampian Data Menu Siswa

## a. Tampilan Sub Menu Data Siswa PerKelas
Pada Tampilan sub Menu Data Siswa  per  kelas  akan  menampilkan data  siswa  per  kelas,  yang  mana  jika kita ingin melihat tampilan pada menu tampilan  Data  siswa  sekolah  ini  maka kita  cukup  mengklik  menu  tersebut.
Tampilan  menu  data  siswa  perkelas sekolah  tersebut  dapat  dilihat  pada tampilan gambar 4.14 di bawah ini.
Gambar 4.14 Tampilan Sub Menu Data

## Siswa Per Kelas

## b. Tampilan Sub Menu Rekap Data Siswa
Pada  Tampilan  sub  Menu  Data Siswa  per  kelas  akan  menampilkan  data siswa per kelas, yang mana jika kita ingin melihat  tampilan  pada  menu  tampilan Data  siswa  sekolah  ini  maka  kita  cukup mengklik  menu  tersebut.  Tampilan  menu data siswa perkelas sekolah tersebut dapat dilihat  pada  tampilan  gambar  4.15  di bawah ini.
Gambar 4.15. Tampilan Sub Menu Rekap Data Siswa
c. Tampilan Sub Menu Data Alumni
Pada  Tampilan  sub  Menu  Data Alumni akan menampilkan data Alumni, yang  mana  jika  kita  ingin  melihat tampilan  pada  menu  tampilan  Data Alimni  sekolah  ini  maka  kita  cukup mengklik menu tersebut. Tampilan menu data  alumni  sekolah  tersebut  dapat dilihat  pada  tampilan  gambar  4.16  di bawah ini.
Gambar 4.16. Tampilan Sub Menu Data Alumni

## d. Tampilan Menu Data Guru
Pada Tampilan Menu Data Guru akan  menampilkan  data  Guru,  yang mana  jika  kita  ingin  melihat  tampilan pada  menu  tampilan  Data  Guru  sekolah ini  maka  kita  cukup  mengklik  menu tersebut.  Tampilan  menu  data  Guru sekolah  tersebut  dapat  dilihat  pada tampilan gambar 4.17 di bawah ini.

## Gambar 4.17. Tampilan Menu Data
Guru
e. Tampilan Menu Data Tamu
Pada  Tampilan  Menu  Data  tanu akan  menampilkan  data  Tamu  yang
berkunjung  dan  memberikan  kritik  dan saran  yang  dapat  memberikan  motipasi bagi  kami,  yang  mana  jika  kita  ingin melihat  tampilan  pada  menu  tampilan Data Tamu sekolah ini maka  kita cukup mengklik menu tersebut. Tampilan menu data  tamu  sekolah  tersebut  dapat  dilihat pada tampilan gambar 4.18 di bawah ini.

## Gambar 4.18 Tampilan Menu Data Tamu

## B. Pembahasan
Perancangan  system  Website  SMP Negeri  12  Seluma  ini  dilakukan  dengan menggunakan  Adobe  Dreamweaver  CS.4  yang merupakan  salah  satu  paket  aplikasiyang digunakan  untuk  merancangserta  membuat sebuah  website.  Dimana  dalam  pengoperasian yang  dilakukan  untuk  menampilkan  sebuah website  ini  dengan  menjalankan  program- program  atau  paket  aplikasi  internet  explorer, jika kita ingin menjalankan program ini pastikan dulu  system  operasi  windows  telah  aktif.untuk manjalankan program ini cukup mengklik ganda program aplikasi yang terdapat pada desktop dan ketikkan
alamat website
Smpnegeri12seluma.com pada  menu  bar  akan tampil menu utama. Pada menu utama pengguna dapat  memilih  menu-menu  dan  sub  sub  menu yang  tempil,  cukup  dengan  memilih  menu kemudian ikuti perintah yang tersedia.

## C. Hasil Pengujian
Dari  hasil  pengujian  system  yang  telah dilakukan yaitu:
1. Melakukan  pengujian  dengan  metode  Black Box.
Pengujian  yang dilakukan untuk antar muka perangkat lunak, pengujian ini dilakukan  untuk  memperhatikan  bahwa fungsi-fungsi  bekerja  dengan  baik  dalam  arti masukan  yang  diterima  dengan  benar  dan keluaran  yang  dihasilkan  benar-benar  tepat. Seperti  melakukan  pengujian  input  dan output  pada  input  form  log  in  admin  seperti pada gambar 2.19 di bawah ini.

## Gambar 4.19 Log in admin
Gambar 4.19 diatas
merupakan  log  in  admin,  apabila kita  ingin  mamasuki  data  pada gambar  tersebut  dan  merupakan data  yang  kita  inginkan,yaitu  data pengguna, bila nama yang dimasukan sesuai dengan data maka pengguna tersebut akan masuk pada halaman  admin  dan  apabila  data salah  maka  tidak  akan  masuk  pada form  log  in  admin  tetapi  akan masuk  ke  halaman  utama  secara otomatis,seperti  pada  gamabar  4.20 dibawah ini.
2. Melakukan  pengujian  secara  localhost    dan On-line
a. Melakukan  pengujian  dangan  server localhost Pada  pengujian  ini  dilakukan  dengan offline  pada  stap  SMP  Negeri  12  Seluma pada  ibuk  Noti  Haryani  S.Pd.  Melakukan Pengujian dengan on-line
Pada  pengujian  pengaksesan  ini  penulis malakukan pengujian penyesuaian informasi dan kesuksesan dalam pengaksesan secara on-line dengan melibatkan  pihak  SMP  Negeri  12  Seluma pada tanggal 15-06-2013.

## V. PENUTUP

## A. Kesimpulan
Dari hasil pembahasan dalam  ini dapat di tarik kesimpulan sebagai berikut:
1. Dalam  membangun  website  sekolah menengah  pertama  Negeri  12  seluma  ini terlebih dahulu di buat rancangan sistemnya, setelah itu data akan ditampilkan pada website SMP Negeri 12 Seluma  dan  di  desain  dengan  bantuan Macromedia  Dreamweaver  cs.4  sebagai software  dan  bahasa  pemograman  PHP untuk  mendukung  pembuatan  website secretariat daerah kabupaten Seluma.
2. Berdasarkan  kuisioner  kepada  pegawai pada SMP Negeri 12 Seluma, maka dapat disimpulkan  bahwa  website  Sekolah kabupaten  seluma  ini  semoga  dapat dijadikan  sarana  dalam  penyampaian informasi tentang SMP Negeri 12 Seluma yang berguna bagi SPM Negeri 12 seluma itu sendiri, dan bagi masyarakat.

## B. Saran
Penulis  menyarankan  bagi  SMP Negeri  12  Seluma  diharap  kan  agar  dapat dipergunakan  sebagai  salah  satu  Media  jasa internet  sebagai  alternative  memepercepat dan  mempermudah  dalam  penyampaian informasi  kapada  masyarakat.  Untuk  lebih meningkatkan keefesiensi dalam memepelajari  dan  mempergunakan  program ini  Admin  diharapkan  mengintal  semua master  pendukung  demi  berjalannya  dengan baik program website ini.

## DAFTAR PUSTAKA
Dewanto, Joko. 2006. Web Desain (Metode Aplikasi       dan Implementasi), Graha Ilmu. Jakarta.
Jogiyanto,  2005. Pengantar  Teknologi  Informasi. Andi, Jakarta
McLeoad.  2004. Pengantar  Teknologi  Informasi . Andi. Jakarta
O’Brean,  2007. Analisa  Perancangan  Sistem Informasi. Andi, Yogyakarta.
Rahardjo,  Budi.    2010.  Pemrograman  Web  (HTM, PHP dan Mysql). Modula. Bandung
Turban,  2003. Pengenalan  Sistem  Informasi .  Gava Media. Yogyakarta
Pembuatan Website SMP......