Melihat Kemacetan Sebagai Turunnya disiplin dan moral bangsa

Kemacetan diDKI Jakarta ini sudah sangat menjadi hal yang wajar, jika kita semua melewati kemacetan bukan hal yang dianggap tabu lg. Tapi dibalik semua ini sebetulnya menaiknya tingkat kendaraan yang menjadi penyebab utama, dari data yang didapat kenaikan kendaraan pertahun pada Polda Metro Jaya menyebutkan akan ada 12 juta kendaraan hilir mudik pada tahun 2011 di jalan Jakarta. Diperkirakan, bila tidak diambil langkah cepat dan tepat lalulntas Jakarta akan lumpuh. Polisi merilis tahun 2010 ini jumlah kendaraan di jakarta mencapai 11.362.396 unit kendaraan. Terdiri dari 8.244.346 unit kendaraan roda dua dan 3.118.050 unit kendaraan roda empat. Dari jumlah angka diatas memang banyaknya penguna kendaraan yang hilir mudik pada jalur lalu lintas jakarta. Bukan hanya kepadatan penduduk tapi akan terjadi kepadatan kendaraan disetiap ruas jalan jakarta. Tanpa kita semua sadari didalam kepemilikan kendaraan tersebut juga banyak terjadi kejahatan yang terjadi karena kendaraan.

Kejahatan yang terjadi bukan halnya kecelakan ( tabrakan, menabrak, atau ditabrak) tetapi sampai kasus pencurian, pemerkosaan, penculikan yang terjadi akhir-akhir ini. Saat kembali melihat kemacetan bukankah kita melihat seutas kepentingan bersama/ umum yang kita gunakan untuk kepentingan pribadi? Lalu sesuai judul diatas dimana turunnya disiplin manusia dan moral bangsa??

  • Parkir sembarangan – hal ini banyak kita jumpai pengunaan kepentingan umun sebagai kepentingan pribadi, kita juga tanpa sadar memerkosa kepentingan umum dan mengeluarkan ego masing-masing agar mendapatkan pembenaran masing-masing pihak. sebagai contoh pengunaan lahan parkir di jalan umum kita semua bisa lihat salah satu gambar dibawah ini..

Patroli

  • Mendahulukan Orang lain – Seperti halnya yang sudah ditetapkan oleh undang-undang bahwa mobil harus mendahulukan pemakai jalan dan kendaraan bermotor ( roda dua ) dan roda dua mendahulukan pejalan kaki seperti diatur oleh UU Nomor 22 Tahun 2009 Tentang Lalu Lintas Dan Angkutan Jalan.

gambar-lalu-lintas-jakarta

  • Salah Arah – jalan melawan arus, sangat membahayakan diri sendiri juga orang lain, tetapi karena ingin terbebas dari macet sejumlah oknum melakukan ini dengan alasan buru-buru. padahal jika saja semua bisa tertib berlalu lintas pasti jakarta kita ini bisa terbebas dari macet.

Sejumlah sepeda motor melawan arus lalu lintas di Jalan Ciputat Raya, Pondok Pinang Jakarta Selatan,

 

  • tabrak lari –  seorang oknum yang memang menginginkan seorang terluka karena beberapa hal pribadi menjadi pemandangan yang tidak asing lagi di jalan raya. Sebagai contoh oknum polisi yang tidak bertanggung jawab mencoba untuk menabrak kumpulan demonstrasi. Hal ini yang memperlihatkan merosotnya kepedulian kita kepada sesama manusia.

polisi-nabrak-mahasiswa

Polisi on Youtube

 

Dari beberapa paparan diatas, kita harus meningkatkan lagi rasa kemanuasiaan, disiplin dan juga pembentukan pribadi yang berkarakter demi masa depan yang lebih baik. Semua kita adalah bersaudara, dan mari kita ciptakan negara indonesia ini bebas dari kemacetan dengan mensukseskan program pemerintahan dengan mengunakan angkutan umum. Serta mencintai bumi ini dan mengurangi polusi udara dengan tidak mengunakan kendaraan yang tidak ramah lingkungan. Mari kita semua galakan penanaman kembali untuk penghijauan daerah yang gundul agar tidak terjadi banjir yang dapat menghambat dalam pengunaan jalan. Mari bersatu untuk indonesia jaya..

 




Proposal Skripsi – Pembuatan website SDN 3 Beji Depok

lihat versi pdf

 

UNIVERSITAS GUNADARMA

 

 

 

 

 

PROPOSAL SKRIPSI


 

 

Ditulis Guna Melengkapi Sebagian Syarat Untuk

Mencapai Jenjang Sarjana Muda

 


Universitas Gunadarma

2011

 

 

 

ABSTRAKSI

PERANCANGAN WEBSITE SEKOLAH SDN 3 DEPOK DENGAN MENGGUNAKAN PHP, DREAMWEAVER DAN MYSQL

PI, Fakultas Ilmu Komputer, 2011

Kata Kunci : Website, Sekolah SDN 3 Depok, PHP, Dreamweaver,  MySQL

 

Penggunaan internet di jaman sekarang bukanlah suatu hal yang baru lagi. Hampir di seluruh dunia mengenalnya. Internet juga merupakan puncak dari suatu teknologi informasi pada penggunaannya disebuah computer.

Internet dapat memperkenalkan segala sesuatu dengan jelas, seperti memperkenalkan diri, dunia usaha, dan lain-lain. Hal ini dapat dilakukan dengan suatu wadah yang dikenal sebagai website.

Website Sekolah SDN 3 Depok ini dibuat untuk memberikan fasilitas yang ditujukan untuk masyarakat luas  untuk memperoleh informasi – informasi seputar dunia pendidikan khususnya di bidang Transportasi.

Dalam penulisan ilmiah ini akan dibahas bagaimana membuat suatu website yang interaktif, dinamis, dan menarik. Pembuatan website ini menggunakan aplikasi PHP dan MySQL, dengan apache sebagai webserver. Dan tentu saja website tersebut dapat dimodifikasi di kemudian hari.

 

Daftar Pustaka (2001 – 2010)

 

DAFTAR ISI

 

Halaman

JUDUL……………………………………………………………………………………………………. i

ABSTRAKSI…………………………………………………………………………………………… ii

DAFTAR ISI………………………………………………………………………………………….. iii

BAB       I        PENDAHULUAN……………………………………………………………… 1

1.1    Latar Belakang Masalah……………………………………………….. 1

1.2    Batasan Masalah…………………………………………………………. 2

1.3    Tujuan Penulisan………………………………………………………… 2

1.4    Metode Penelitian……………………………………………………….. 2

1.5    Sistematika Penulisan………………………………………………….. 3

BAB       II      LANDASAN TEORI………………………………………………………….. 4

2.1    Internet……………………………………………………………………… 4

2.2    Beberapa Istilah Dalam Internet……………………………………. 4

2.3    HTML ……………………………………………………………………… 5

2.3.1    STRUKTUR DASAR HTML…………………………… 5

2.3.1.1  Tag Gambar…………………………………………. 6

2.3.1.2  Tabel…………………………………………………… 6

2.3.1.3  Mengatur Baris dan Paragraf………………….. 7

2.3.1.4  Membuat Form…………………………………….. 8

2.3.1.5  Menyisipkan Script………………………………. 9

2.4    Pengenalan PHP (Hypertext Prepocessor) …………………9

2.4.1  Pengenalan Script PHP……………………………………… 11

2.4.2  Variabel dan Tipe Data……………………………………… 12

2.4.3  Konstanta……………………………………………………….. 14

2.5    Tipe Data…………………………………………………………………. 15

2.5.1    Variabel…………………………………………………………. 16

2.5.1.1Variabel Array……………………………………… 16

2.5.2    Operator……………………………………………………….. 16

2.5.2.1  Operator Aritmatika……………………………. 17

2.5.2.2  Operator Perbandingan………………………… 17

2.5.2.3  Operator Logika………………………………….. 18

2.5.3    Pernyataan Kondisi………………………………………… 18

2.5.3.1  if..then..else………………………………………… 18

2.5.4    Looping…………………………………………………………. 19

2.5.4.1  While..Wend………………………………………. 19

2.5.4.2  For..Next……………………………………………. 19

2.5.4.3  For Each..Next……………………………………. 19                          2.6       SQL….            20

2.6.1  Select………………………………………………………………. 20

2.6.2  Insert………………………………………………………………. 20

2.6.3  Delete……………………………………………………………… 20

2.6.4  Update……………………………………………………………. 21

2.6.5  Where Klause…………………………………………………… 21

2.6.6  Array……………………………………………………………… 21

2.7    Database…………………………………………………………………. 22

2.7.1  MySQL………………………………………………………….. 23

2.8    Macromedia Dreamweaver…………………………………………. 23

2.8.1    Wajah Dreamweaver……………………………………….. 24

2.8.2    Tools Pada Dreamweaver Mx………………………….. 24

2.8.3    Property Inspector…………………………………………. 25

2.8.4    Insert Bar………………………………………………………. 25

2.9    Adobe Photoshop CS………………………………………………… 28

2.9.1    Area Kerja Photoshop…………………………………….. 28

2.10  Rancangan Navigasi…………………………………………………… 29

2.10.1  Struktur Navigasi Linear………………………………….. 29

2.10.2  Struktur Navigasi Non Linear…………………………… 30

2.10.3  Struktur Navigasi Hirarki…………………………………. 31

2.10.4  Struktur Navigasi Campuran……………………………. 31

BAB       III     ANALISA DAN PEMBAHASAN…………………………………….. 32

3.1    Langkah – langkah perancangan Website Sekolah Dasar Negeri 3 Depok.        32

3.2    Pembuatan Struktur Navigasi……………………………………… 34

3.3    Pembuatan Design Input/Output………………………………… 36

3.3.1    Design Halaman Home……………………………………. 36

3.3.2    Design Halaman Index Formulir……………………….. 38

3.3.3    Design Halaman Tabel calon…………………………….. 40                          3.3.4    Design Halaman Buku Tamu  42

3.3.5    Design Halaman Struktur…………………………………. 44

3.3.6    Design Halaman Galery…………………………………… 45

3.3.7    Design Halaman Konfirmasi Administrator……….. 46

3.3.8    Design Halaman Menu Administrator……………….. 47

3.4    Pembuatan Database………………………………………………….. 48

3.4.1    Membuat Nama Database……………………………….. 48

3.4.2    Membuat Tabel……………………………………………… 49

 

 

DAFTAR ISI

 

Halaman

JUDUL……………………………………………………………………………………………………. i

ABSTRAKSI…………………………………………………………………………………………… ii

DAFTAR ISI………………………………………………………………………………………….. iii

BAB       I        PENDAHULUAN……………………………………………………………… 1

1.1    Latar Belakang Masalah……………………………………………….. 1

1.2    Batasan Masalah…………………………………………………………. 2

1.3    Tujuan Penulisan………………………………………………………… 2

1.4    Metode Penelitian……………………………………………………….. 2

1.5    Sistematika Penulisan………………………………………………….. 3

BAB       II      LANDASAN TEORI………………………………………………………….. 4

2.1    Internet……………………………………………………………………… 4

2.2    Beberapa Istilah Dalam Internet……………………………………. 4

2.3    HTML ……………………………………………………………………… 5

2.3.1    STRUKTUR DASAR HTML…………………………… 5

2.3.1.1  Tag Gambar…………………………………………. 6

2.3.1.2  Tabel…………………………………………………… 6

2.3.1.3  Mengatur Baris dan Paragraf………………….. 7

2.3.1.4  Membuat Form…………………………………….. 8

2.3.1.5  Menyisipkan Script………………………………. 9

2.4    Pengenalan PHP (Hypertext Prepocessor) …………………9

2.4.1  Pengenalan Script PHP……………………………………… 11

2.4.2  Variabel dan Tipe Data……………………………………… 12

2.4.3  Konstanta……………………………………………………….. 14

2.5    Tipe Data…………………………………………………………………. 15

2.5.1    Variabel…………………………………………………………. 16

2.5.1.1Variabel Array……………………………………… 16

2.5.2    Operator……………………………………………………….. 16

2.5.2.1  Operator Aritmatika……………………………. 17

2.5.2.2  Operator Perbandingan………………………… 17

2.5.2.3  Operator Logika………………………………….. 18

2.5.3    Pernyataan Kondisi………………………………………… 18

2.5.3.1  if..then..else………………………………………… 18

2.5.4    Looping…………………………………………………………. 19

2.5.4.1  While..Wend………………………………………. 19

2.5.4.2  For..Next……………………………………………. 19

2.5.4.3  For Each..Next……………………………………. 19                          2.6       SQL….            20

2.6.1  Select………………………………………………………………. 20

2.6.2  Insert………………………………………………………………. 20

2.6.3  Delete……………………………………………………………… 20

2.6.4  Update……………………………………………………………. 21

2.6.5  Where Klause…………………………………………………… 21

2.6.6  Array……………………………………………………………… 21

2.7    Database…………………………………………………………………. 22

2.7.1  MySQL………………………………………………………….. 23

2.8    Macromedia Dreamweaver…………………………………………. 23

2.8.1    Wajah Dreamweaver……………………………………….. 24

2.8.2    Tools Pada Dreamweaver Mx………………………….. 24

2.8.3    Property Inspector…………………………………………. 25

2.8.4    Insert Bar………………………………………………………. 25

2.9    Adobe Photoshop CS………………………………………………… 28

2.9.1    Area Kerja Photoshop…………………………………….. 28

2.10  Rancangan Navigasi…………………………………………………… 29

2.10.1  Struktur Navigasi Linear………………………………….. 29

2.10.2  Struktur Navigasi Non Linear…………………………… 30

2.10.3  Struktur Navigasi Hirarki…………………………………. 31

2.10.4  Struktur Navigasi Campuran……………………………. 31

BAB       III     ANALISA DAN PEMBAHASAN…………………………………….. 32

3.1    Langkah – langkah perancangan Website Sekolah Dasar Negeri 3 Depok.        32

3.2    Pembuatan Struktur Navigasi……………………………………… 34

3.3    Pembuatan Design Input/Output………………………………… 36

3.3.1    Design Halaman Home……………………………………. 36

3.3.2    Design Halaman Index Formulir……………………….. 38

3.3.3    Design Halaman Tabel calon…………………………….. 40                          3.3.4    Design Halaman Buku Tamu  42

3.3.5    Design Halaman Struktur…………………………………. 44

3.3.6    Design Halaman Galery…………………………………… 45

3.3.7    Design Halaman Konfirmasi Administrator……….. 46

3.3.8    Design Halaman Menu Administrator……………….. 47

3.4    Pembuatan Database………………………………………………….. 48

3.4.1    Membuat Nama Database……………………………….. 48

3.4.2    Membuat Tabel……………………………………………… 49

 

 

BAB I

PENDAHULUAN

 

1.1 Latar Belakang

Pesatnya perkembangan teknologi seiring dengan kemajuan informasi menuntut manusia untuk melangkah lebih maju mengimbangi kedua hal tersebut, waktu pun dirasakan menjadi sangat berharga dimana segala aktivitas yang dilaksanakan harus terstruktur atau dapat dikatakan sesuai dengan rencana yang sudah dibuat sebelumnya dan bilamana kita tidak merancang rencana atau planning yang akan kita lakukan kedepan maka dipastikan akan banyak waktu yang terbuang sia – sia. Kemudahan yang diperoleh dalam melaksanakan segala aktivitas sehingga waktu yang dipakai menjadi efisien merupakan sesuatu yang tidak kalah pentingnya di era globalisasi seperti saat ini dan solusi yang akan menjawabnya adalah internet.

Kecenderungan teknologi yang terjadi dalam bidang informasi khususnya dunia internet memunculkan suatu alternatif sistem baru  yang dikenal oleh banyak orang yang merupakan solusi bagi sebagian besar manusia yang terbentur pada masalah keterbatasan waktu dimana teknologi ini memberikan kemudahan – kemudahan yang sangat menguntungkan bagi penggunanya. Kita mengenalnya dengan istilah internet. Untuk mencari informasi di internet dapat dilakukan dengan mengunjungi situs (website) yang berhubungan dengan informasi yang dibutuhkan atau dapat dilakukan dengan pencarian di situs pencari (Search Engine Site’s).

Berdasarkan pada pandangan tersebut, penulis dapat mempromosikan dan memberi informasi mengenai Sekolah Dasar Negeri 3 Depok kepada masyarakat luas. Pada kesempatan ini penulis mengangkat judul “Perancangan Website Sekolah Dasar Negeri 3 Depok dengan menggunakan PHP dan MySQL”. Dimana pada website ini terdapat informasi detail mengenai informasi seputar Sekolah Dasar Negeri 3 Depok.

 

1.2 Batasan Masalah

Website ini dibangun dengan menggunakan PHP . Pada Website  ini, penulis lebih menekankan pada informasi seputar Sekolah Dasar Negeri 3 Depok dan informasi penerimaan calon taruna/i diploma III dan IV Transportasi Darat. Website ini juga dirancang untuk menangani pendaftaran calon taruna/i secara online,jika syarat terpenuhi maka calon calon taruna/i akan masuk ke dalam daftar calon taruna/i untuk selanjutnya mengikuti tahap ujian penerimaan taruna/i baru.

 

1.3 Tujuan Penulisan

Tujuan yang diharapkan penulis adalah agar masyarakat luas dapat dengan mudah memperoleh informasi – informasi. mengenai seputar Sekolah Dasar Negeri 3 Depok  dan informasi penerimaan calon taruna/i Transportasi Darat. Penulis juga berharap agar web ini bisa berguna bagi yang ingin mempelajari langkah – langkah pembuatan web dengan menggunakan bahasa pemrograman PHP.

 

1.4 Metode Penelitian

Tahapan dalam pembuatan Website yang digunakan penulis dalam penulisan ilmiah ini adalah :

  1. Perancangan, penulis merancang bentuk dari tampilan website dan navigasinya.
  2. Pembentukan elemen, pada tahap ini penulis mengatur dan merangkai tiap – tiap elemen website mulai dari teks (Microsoft Word 2003), gambar (Adobe Photoshop), bahasa pemrograman (PHP), database (MySQL) ke dalam tiap bagian website ini secara detail.
  3. Pengujian, tahap terakhir dimana penulis mengujicobakan website ini secara visual melalui PC dengan spesifikasi sebagai berikut :
  • AMD 1,1 GHz/14”/40 GB/VGA 256 MB
  • Intel Pentium IV/17”/40 GB/VGA Onboard

 

1.5 Sistematika Penulisan

Untuk mempermudah didalam penulisan dan pemahaman penulisan ilmiah ini maka penulis membagi menjadi empat bab, dimana setiap bab terdiri dari beberapa sub bab. Berikut gambaran secara garis besar sistematika penulisan.

 

Bab I merupakan pendahuluan dari penulisan yang berisikan latar belakang masalah, batasan masalah, tujuan penulisan, metode penulisan dan sistematika penulisan.

Bab II merupakan landasan teori, dimana pada bab ini penulis menjelaskan teori yang digunakan dalam perancangan web ini. Selain itu pada ini dijelaskan juga mengenai  sofware – software yang digunakan dalam perancangan web seperti Macromedia Dreamweaver MX,  aplikasi database dengan menggunakan MySQL dan lain sebagainya.

Bab III  merupakan pembahasan, dimana pada bab ini penulis menguraikan tentang navigasi web, perancangan database, struktur file, listing pemrograman dan analisa program serta implementasi.

Bab IV merupakan penutup,pada bab ini berisi kesimpulan dan saran-saran penulis. Pada bab ini juga penulis akan melampirkan kesulitan dan kemudahan dalam membuat web ini.

 

 

BAB II

LANDASAN TEORI

 

2.1 Internet

Secara umum Internet merupakan jaringan global yang terbentuk dari jaringan komputer lokal dan regional, memungkinkan komunikasi data antar komputer-komputer yang terhubung ke jaringan tersebut dengan menggunakan berbagai macam media seperti jalur telepon, satelit, leased-line, ADSL (Asymmentric Digital Subscriber Line), dan kabel serat optik.

Internet bukanlah objek kasat mata yang dapat dipegang dan dirasakan. Internet merupakan entitas organik kooperatif, bentuk digital pengalaman manusia, yang mampu menampung dan melayani berbagai bentuk informasi dan kepentingan Internet juga menyediakan alat elektronik seperti perangkat lunak, musik, gambar-gambar, multimedia, video, teks, dan pembicaraan lokal yang murah. Namun berbeda dengan telepon, yang merupakan sistem dengan penghubung satu sambungan pada satu saat, Internet memberikan hubungan yang dinamis dan terbuka kepada banyak orang pada saat bersamaan.

 

2.2 Beberapa Istilah dalam Internet

Berikut ini beberapa istilah yang pada umumnya sering digunakan dalam berhubungan dengan Internet, diantaranya:

 

1.         World Wide Web (www)

Salah satu layanan aplikasi di Internet adalah www, pelayanan yang dikembangkan di Internet dan menjadi layanan aplikasi yang paling popular digunakan pemakai jaringan Internet. WWW atau yang biasa disebut web saja, bekerja dengan teknologi  yang disebut hypertext, yang kemudian dikembangkan menjadi suatu protocol aplikasi yang disebut HTTP ( Hyper Tect Transfer Protokol )

 

  1. Web Browser

Browser adalah sebuah aplikasi yang digunakan untuk menjelajah dunia maya Internet. Aplikasi ini memiliki kemampuan untuk menampilkan suatu halaman web yang ditulis dalam bentuk dokumen HTML.

2.3 HTML

Merupakan singkatan dari HyperText Markup Language. HTML digunakan untuk membangun sebuah  halaman web. HTML bukanlah sebuah bahasa pemrograman melainkan bahasa markup (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untuk menentukan format atau style dari teks yang ditandai. Ciri utama dari  file HTML adalah memiliki ekstensi .htm, html atau .shtml.

Kode-kode yang dibuat menggunakan bahasa inggris, misal untuk membuat teks tebal, digunakan kode B atau bold (tebal), untuk mencetak huruf miring digunakan kode I atau  italic (miring), dsb.

 

2.3.1 STRUKTUR DASAR  HTML

Sebuah file HTML merupakan file teks biasa yang mengandung tag HTML, yaitu tag tag yang berpasangan  dan ditandai dengan symbol < dan > . Pasangan  atau “penutup perintah “ dari sebuah tag ditandai  dengan tanda ‘/’. Misalnya dari tag <html> adalah </html>. Secara lengkap, file HTML mempunyai bagian head, bagian body, jadi struktur lengkapnya adalah  sebagai berikut:

<html>

<head>

<title>

…letak judul disini…

</title>

<head>

<body>

…letak body disini…

</body>

</html>

 

Bagian head biasanya berisi informasi mengenai dokumen tersebut, misalnya judul dokumen, versi HTML yang digunakan, dan lain-lain. Sedangkan bagian body berisi layout atau desain halaman web.

 

2.3.1.1  Tag Gambar

Untuk memasukan gambar dalam website, ada dua cara yang dapat dilakukan. Hal ini didasarkan pada tempat source gambar itu berada,yaitu :

  • Gambar dalam lokasi yang sama
  • Gambar tidak dalam lokasi yang sama

Tidak semua format gambar dapat dimasukan dalam website, misalnya format TIF; tetapi yang dapat dimasukan adalah format gambar yang sesuai, misalnya GIF dan JPG. Untuk memasukan gambar dari lokasi yang sama dapat dilakukan dengan tag :

<img src=”namagambar.extension”>

Sedangkan untuk memasukan gambar dari file eksternal digunakan

Tag :

<A HREF =”URL  dan nama file”>

 

2.3.1.2 Tabel

Dokumen HTML sering digunakan untuk menampilkan data, terlebih lagi dokumen yang berhubungan dengan database. Untuk menampilkan data tersebut, HTML menyediakan tag yang dapat digunakan  untuk membuat sebuah tabel. Contoh penulisannya adalah sebagai berikut:

 

<td> </td>

<tr></tr>

<td></td>

<td></td> <td></td>
<td></td> <td></td>

 

<table>

<tr>

<td>baris1kolom1</td>

<td>baris1kolom2</td>

</tr>

<tr>

<td>baris2kolom1</td>

<td>baris2kolom2</td>

</tr>

<tr>

<td>baris3kolom1</td>

<td>baris3kolom2</td>

</tr>

</table>

 

2.3.1.3 Mengatur  Baris dan Paragraf

Tidak seperti penulisan dokumen pada word processor, walaupun teks sudah diatur menggunakan enter maupun paragrap dalam pengetikannya namun hasil yang akan tampil masih akan berupa teks ulang panjang tanpa adanya pengaturan baris.

 

 

Untuk mengatur baris dan paragraph HTML digunakan tg, yaitu:

  • Tag <br>

Digunakan untuk membuat baris baru. Tag ini merupakan tag tunggal, oleh karena itu tidak memerlukan tag penutup </br>

  • Tag <p>

Tag ini digunakan untuk membuat paragraph dalam HTML. Jadi apabila menggunakan tag <p></p> sama saja menulis tag <br> sebanyak dua kali. Format penulisannya adalah sebagai berikut :

<p atribut=”value”>…</p>

  • Tag <pre>

Tag ini digunakan untuk menampilkan teks dokumen sesuai  dengan penulisan teks pada editor. Tag ini berguna untuk penggunaan spasi antar baris dan memudahkan untuk meletakkan tab dalam dokumen.

 

 

2.3.1.4 Membuat Form

Fasilitas form dapat digunakan untuk membuat formulir pada halaman web. Dengan formulir user bisa memasukkan data – datanya , baik yang berupa informasi maupun keperluan yang lain. Ada beberapa tag yang digunakan dalam pembuatan form ini

  • Tag <form>

Tag ini digunakan untuk membuat form. Format penulisannya adalah sebagai berikut:

<form atribut1=”…”atribut2=”…”>…</form>

  • Tag <input>

Tag ini digunakan untuk membuat komponen-komponen input dari sebuah form. Format penulisannya adalah sebagai berikut:

<input atribut1=”…”atribut2=”…>…</form>

  • Tag <select>

Tag ini digunakan untuk membuat suatu pilihan pada sebuah daftar. Format penulisannya adalah sebagai berikut:

<select atribut1=”…”atribut2=”…”>…</select>

Tag <select> ini digunakan di dalam tag <option>. Formatnya adalah :

<option value=”…”> item

  • Tag <textarea>

Tag ini digunakan untuk membuat kotak masukkan yang banyak bari. Format penulisannya adalah sebagai berikut:

<textarea atribut1=”…”atribut2=”…”>…</textarea>

 

2.3.1.5 Menyisipkan Script

Dalam pembuatan halaman web biasanya perancang web ingin menggabungkan bahasa pemrograman lain (script) agar halaman web terlihat lebih bagus. Untuk memasukkan  skrip ke dalam dokumen HTML digunakan tag <script>. Format penulisannya adalah sebagai berikut:

<script atribut=”…”>…script statement…</script>

 

2.4 Pengenalan PHP (Hypertext Prepocessor)

PHP adalah teknologi yang dikembangkan pada tahun 1995 oleh Rasmus Lerdorf. Beberapa versi awal yang tidak dipublikasikan digunakan untuk situs pribadinya sebagai pencatat siapa saja yang mengakses daftar riwayat hidup yang ia tampilkan di situsnya. PHP merupakan singkatan dari PHP : Hypertext Preprocessor yang merupakan nama baru dari kepanjangan aslinya yaitu Personal Home Page Tool. PHP berasal dari beberapa script Perl yang kemudian terus berkembang dan akhirnya menciptakan versi “real” dari PHP yang dikenal sebagai PHP/FI (PHP + Form Interpreter).

PHP 3.0 dianggap sebagai “first real version” dari PHP, walaupun sudah banyak situs yang menggunakan PHP sebelum PHP 3.0 di release. PHP 3.0 merupakan penulisan ulang source kode PHP dari awal oleh Andi Gutsman dan Zeev Zuraski, saat itu lebih dari 10 % situs yang berada di internet menggunakan PHP 3.0. PHP 4 direlease secara official pada bulan Mei tahun 2000. Sampai saat ini PHP telah digunakan lebih dari 9 juta domain yang berada di internet.

Saat ini, cara termudah untuk menginstal PHP adalah menggunakan PHPTriad, kita tidak perlu mengkonfigurasi apapun. Caranya yaitu :

  1. Download PHPTriad dari http://www.PHPGreek.com
  2. Klik ganda ikon PHPTriad melalui Windows Explorer.
  3. Lalu akan muncul kotak dialog License Agreement , klik tombol I Agree.
  4. Terjadilah     proses     install   PHPTriad , tunggu    hingga instalasi selesai (Completed),lalu klik tombol Close.

 

Setelah PHP diinstal, kita harus memastikan bahwa PHP telah terinstal dengan benar, caranya yaitu :

  1. Aktikan server Apache, klik tombol Start > All Programs > PHPTriad > Apache Console > Start Apache.
  2. Buka browser Internet Explorer ketik http://localhost/ pada bagian Address. Jika muncul tampilan halaman “WELCOME!” berarti PHP telah terinstal dengan sempurna.

 

Dengan menginstal PHPTriad, sebenarnya kita tidak hanya menginstal PHP saja, tetapi juga sekaligus menginstal Apache sebagai web server dan MySQL sebagai databasenya. [1]

Adapun kelebihan-kelebihan dari PHP yaitu :

  • PHP dapat diperoleh secara gratis.
  • PHP mudah dibuat dan kecepatan akses tinggi.
  • PHP dapat berjalan dalam web server yang berbeda dan dalam sistem operasi yang berbeda pula. PHP dapat dijalankan pada system operasi UNIX, Windows98, Windows NT dan Macintosh.
  • PHP adalah termasuk bahasa yang embedded (dapat digabung atau diletakkan dalam tag HTML).
  • PHP didukung oleh banyak sistem database, yaitu: oracle, Sybase, mSQL, MySQL, solid, generic ODBC, postgres SQL.

2.4.1 Pengenalan Script PHP

Script PHP diawali oleh tanda ‘<?’ dan diakhiri oleh tanda ‘?>’, pemberian tanda script pada PHP 3.0 masih berlaku pada PHP 4.0. Sebagai konsistensi, kita menggunakan tanda ‘<?php’ sebagai awalan dan tanda ‘?>’ sebagai akhir dari script PHP.

Nama file yang mengandung script PHP sejak versi 4.0 menggunakan ekstensi file .php sebagai standar. Pada versi sebelumnya ekstensi nama script PHP beragam, ada yang menggunakan .php3 ada juga yang menggunakan .phtml, sebagai standar sebaiknya kita menggunakan ekstensi .php untuk memudahkan kita melakukan pengelolaan file yang kita miliki.

PHP mempunyai dua jenis penulisan script yang akan dieksekusi oleh webserver, yaitu :

a. Embedded script, yaitu cara penulisan script PHP dengan memasukkannya ke dalam script HTML.

Contoh embedded script:

File Contoh1.php

<html>

<head>

<title>

Contoh embedded script

</title>

</head>

<body>

<?php

echo (“Halo apa kabar? Nama saya rika”);

?>

</body>

</html>

 

b. Non-embedded script, yaitu cara penulisan script PHP yang tidak dimasukkan ke

dalam script HTML.

Contoh non-embedded script:

File Contoh2.php

<?php

echo (“<html>

<head>

<title>

contoh non-embedded script

</title>

</head>

<body>

Hallo apa kabar? Nama saya rika juga

</body>

</html>”);

?>

 

2.4.2 Variabel dan tipe data

Variabel digunakan untuk menyimpan data sementara, dan nilainya bias berubah-ubah setiap kali program dijalankan. Dalam PHP, setiap variable selalu dimulai dengan tanda $ dan diikuti dengan nama variabelnya, tidak melihat apakah data tersebut integer, real maupun string, PHP akan secara otomatis mengkonversi data menurut tipenya. Nama variabel dapat berupa kombinasi antara huruf alfabet dan angka dengan panjang maksimal 32 karakter.

Berikut adalah aturan singkat variabel dalam PHP:

  • Diawali dengan tanda dollar ( $ ).
  • Bersifat case sensitive (membedakan huruf besar dan kecil).
  • Nama variabel hanya bisa diawali dengan huruf atau garis bawah, baru dapat diikuti dengan beberapa huruf atau angka maupun garis bawah.

 

Contoh yang benar:

$umur=25;

$_umur=”25 tahun”;

$_1001_malam=”cerita”;

Contoh yang salah:

$…umur=25;

$1001_malam=”cerita”;  // Kedua contoh ini salah karena tidak diawali dengan huruf atau _.

 

Dalam bahasa pemrograman lain ada bermacam-macam tipe data, misalnya integer (bilangan bulat), float (bilangan pecahan), char (karakter angka dan huruf), string (kumpulan huruf atau angka), dan berbagai tipe data lainnya.

 

PHP mempunyai lima macam tipe data, yaitu :

  1. Integer, contohnya :

$umur=25;

$nilai=89;

$suhu=27;

  1. Float/double, contohnya :

$harga=35000.00;

$IPK=3.37;

10

$panjang=12,77;

c.    String, contohnya :

$nama=”rika poerminayanti”;

$umur=”21 tahun”;

d.   Array, contohnya :

$nama[0]=”rika”;

$nama[1]=”poerminayanti”;

echo “Nama Saya=$nama[0] $nama[1];

/* outputnya: Nama Saya = rika poerminayanti

e.   Objek, contohnya :

Class bikin_kopi {

Function bikin ( ) {

Return “masukan gula dan kopi ke dalam gelas, lalu tuang air mendidih”;

}

}

$obj=new bikin_kopi;

echo “cara membuat kopi adalah” .$obj -> bikin ( );

2.4.3    Konstanta

Konstanta adalah variabel yang nilai tetap. PHP telah mendefinisikan beberapa konstanta seperti E_ERROR, E_WARNING, PHP_VERSION dan sebagainya.

Cara membuat konstanta, standar penulisan konstanta :

Define (“nama_konstanta”,”nilai_konstanta”);

Contoh :

<html>

<head>

</head>

<body>

<?

Define (“kampus”,”Universitas Gunadarma Depok”);

Echo kampus;

?>

</body>

</html>

2.5  Tipe Data

Tipe data yang dikenal oleh VBSript hanya ada satu, yaitu variant.Variant  ini dapat digunakan untuk menampung berbagai jenis data. Namun variant memiliki beberapa subtype yang dikategorikan berdasarkan jenis data yang dipergunakan. Berikut ini adalah subtipe yang terdapat pada variant.

 

Tabel 2.1 Subtype Variabel

Subtipe Keterangan
Boolean Tediri dari nilai true atau false
Byte Terdiri dari bilangan integer antara 0 sampai 255
Currency Berisi bilangan riil antara -922.337.203.685.477,5808 sampai 922.337.203.685.477,5807
Date (time) Berisi data tanggal antara 1 Januari 100 sampai 31 Desember 999
Double Berisi bilangan float presisi ganda antara 1,79769313486232E308 sampai -4,94065645841247E-324 sampai 1,79769313486232E308 untuk nilai positif.
Empty Menandakan bahwa varian belum diinisialisasi. Untuk variable numeric nilainya 0 sedangkan untuk variable string nilainya (“”).
Error Berisi nomor pesan kesalahan
Integer Berisi bilangan integer antara -32.768 sampai 32.767
Long Berisi bilangan integer antara -2.147.483.648 sampai 2.147.483.647
Null Varian yang berisi data yang tidak valid
Object Berisi sebuah objek
Single Berisi nilai float presisi tunggal antara -3,402823E38 sampai -1,401298E-45 untuk nilai negative, dan 1,401298E-45 sampai 3,40282E38 untuk nilai positif
String Berisi data string (teks) yang dapat mencapai 2 juta karakter

 

2.5.1 Variabel

Variabel adalah suatu tempat dimemori yang dialokasikan sebagai wadah untuk menyimpan informasi yang dibutuhkan program dan nilainya dapat berubah -ubah sepanjang jalannya program. Adapun aturan penamaan variabel adalah:

  • Harus dimulai dengan huruf .
  • Tidak boleh ada nama variabel yang sama pada ruang lingkup yang sama.
  • Dapat mencapi 255 karakter.
    • Tidak boleh menggunakan karakter-karakter tertentu, seperti karakter yang digunakan untuk operasi metematika (misalnya +, -, /, *, <, >), atau kata-kata kunci yang telah dipergunakan untuk menulis kode program, misalnya if, then, else, exit, dan lain-lain.
    • Tidak boleh menggunakan spasi. Untuk menggantikan spasi, dapat menggunakan karakter underscore(_).

 

2.5.1.1  Variabel  Array

Array merupakan sekumpulan nilai data yang dikelompokkan dalam sebuah variabel. Untuk mendeklarasikan sebuah variabel array menggunakan pernyataan sebagai berikut:

Dim nama_array(elemen-1)

 

2.5.2 Operator

Operator merupakan suatu alat yang dipergunakan untuk mengolah dan memanipulasi data.

 

 

2.5.2.1 Operator Aritmatika

Operator Aritmatika adalah operator yang digunakan untuk operasi matematis.

 

Tabel 2.2 Operator Aritmatika

Operator Keterangan
^ Digunakan untuk pemangkatan
* Digunakan untuk perkalian
/ Digunakan untuk pembagian
Digunakan untuk pembagian, namun hasil yang diperoleh adalah integernya.
Mod Digunakan untuk pembagian, namun hasil yang diperoleh adalah sisa dari pembagian tersebut.
+ Digunakan untuk penambahan
Digunakan untuk pengurangan
& Digunakan untuk penggabungan string

 

2.5.2.2 Operator Perbandingan

Operator perbandingan adalah operator yang membandingkan operasi matematis dengan nilai atau operasi yang lain.

 

Tabel 2.3 Operator Perbandingan

Operator Deskripsi
< Lebih kecil
> Lebih besar
<= Lebih kecil sama dengan
>= Lebih besar sama dengan
= Sama dengan
<> Tidak sama dengan

 

2.5.2.3 Operator Logika

Operator logika digunakan untuk membandingkan dua ekspresi perbandingan dan menghasilkan nilai yang bersifat boolean.

 

Tabel 2.4 Operator Logika

Operator Deskripsi
And Dan
Or Atau
Xor Atau yang ekslusif
Not Tidak
Eqv Sebanding
Imp Implikasi

 

2.5.3 Pernyataan Kondisi

Pernyataan kondisi digunakan untuk menentukan alur pemrograman apabila ada dua keadaan atau lebih yan harus dipilih aslah satu sebelum menuju kelangkah pemrogramn berikutnya.

 

2.5.3.1 If…Then…Else

Digunakan untuk memilih salah satu dari blok pernyataan, tergantung dari nilai ekspresi yang diuji. Penggunaannya adalah:

If kondisi 1 then

alternative tindakan 1

[elseif kondisi 2 then

alternative tindakan 2]

[else

alternative tindakan 3]

endif

 

2.5.4 Looping

Looping digunakan untuk mengulang-ulang suatu blok pernyataan selama kondisi masih terpenuhi.

 

2.5.4.1 While…Wend

Pernyataan ini digunakan  untuk mengulang-ulang suatu blok pernyataan selama kondisi masih terpenuhi. Penggunaanya adalah sebagai berikut:

While kondisi

[pernyataan]

Wend

 

2.5.4.2 For..Next

Pernyataan ini digunakan untuk mengulang-ulang suatu blok pernyataan jika jumlah pengulangan telah diketahui. Penggunaannya adalah sebagai berikut:

For pencacah = awal To akhir [Step langkah]

[pernyataan]

[Exit for]

[pernyataan]

Next

 

2.5.4.3 For Each…Next

Pernyataan ini digunakan untuk mengulang-ulang suatu blok pernyataan untuk setiap elemen array atau koleksi. Penggunaannya adalah sebagai berikut:

For Each elemen In group

[pernyataan]

[Exit For]

[pernyataan]

Next

 

2.6 SQL

SQL adalah singkatan dari Structured Query Language dan sering disebut sequel saja. SQL merupakan bahasa standar untuk pengolahan database. Bahasa ini mengandung perintah-perintah yang dapat digunakan untuk memasukkan, mengubah, menghapus, maupun memilih data.

 

2.6.1 Select

Perintah select digunakan untuk mengambil data dari suatu tabel. Sintaksnya adalah sebagai berikut:

SELECT {*nama_field} [INTO table_tujuan]

FROM nama_tabel

[WHERE kondisi]

 

2.6.2 Insert

Perintah insert digunakan untukmenyisipkan data ke dalam tabel. Sintaksnya adalah sebagai berikut:

INSERT INTO nama_tabel [(field1[,field2,…])

VALUES (ekspresi1[,ekspresi2,…])

Atau:            INSERT INTO namatabel FROM ARRAY nama_array

 

2.6.3 Delete

Perintah delete digunakan untuk menghapus sebuah record dari tabel. Sintaksnya adalah sebagai berikut:

DELETE FROM nama_tabel

WHERE kondisi

2.6.4 Update

Perintah update digunakan untuk memperbarui nilai suatu data. Sintaksnya adalah sebagai berikut:

UPDATE nama_tabel SET criteria WHERE kondisi

 

2.6.5 Where Klause

Klausa Where digunakan untuk memberi kondisi pada statemen SELECT, UPDATE, dan DELETE.

Klausa Where dapat menggunakan operator perbandingan berikut :

 

Tabel 2.5 Operator Kondisi

Operator Kondisi
= Sama dengan
<> Tidak sama dengan
> Lebih besar dari
< Lebih kecil dari
>= Lebih besar sama dengan
<= Lebih kecil sama dengan
BETWEEN Antara range dua kondisi
LIKE Perbandingan pencocokan pola

2.6.6 Array

Array adalah kumpulan nilai – nilai data bertipe sama dalam urutan tertentu yang menggunakan sebuah nama yang sama. Letak urutan dari suatu elemen array ditunjukkan oleh suatu subscript atau siatu index. Array berbeda dengan variabel, array dapat mempunyai sejumlah nilai sedangkan variabel hanya mempunyai satu nilai.

Suatu array dapat dideklarasikan dengan menyebutkan jumlah dari elemennya yang tertulis diantara tanda ‘[]’. Array dapat berdimensi satu, dua, tiga atau lebih.

Contoh :

<?php

$kota[] = “jogjakarta”;

$kota[] = “semarang”;

$kota[] = “bandung”;

18

{

echo(“$kota[2]”);//output semarang

}

?>

 

Array Multidimensi

Array bermultidimensi mewakili bentuk ruang. Dengan fungsi array() kita dapat mengisi array multidimensi.

2.7  Database

Ketika aplikasi yang akan dibuat membutuhkan informasi yang akan ditampilkan ke user, seperti berita, stok barang, perkiraan cuaca dan lain- lain, maka perlu adanya aplikasi yang digunakan untuk menyimpan berbagai informasi atau data yang dibutuhkan dengan terstruktur. Dengan menggunakan PHP sebenarnya kita dapat saja menyimpan data dengan bentuk teks, untuk aplikasi yang tidak begitu kompleks mungkin hal tersebut dapat saja dilakukan. Namun, ketika aplikasi yang dibuat cukup rumit dan kompleks, maka digunakan database. Dengan database, aplikasi web yang dibuat akan bersifat dinamis. MySQL adalah salah satu contoh database yang banyak digunakan untuk pembuatan aplikasi. Dengan konfigurasi web server apache yang baik PHP dan MySQL menjadi kombinasi yang baik. Dengan penggunaan database, aplikasi web yang akan dibuat akan menjadi lebih fleksibel dan memudahkan dalam maintenance.

 

2.7.1   MySQL

MySQL merupakan database yang paling popular digunakan untuk membangun aplikasi web yang menggunakan database sebagai sumber dan pengelola datanya. Kepopuleran MySQL dimungkinkan karena kemudahannya untuk digunakan, cepat secara kinerja query, dan mencukupi untuk kebutuhan database perusahaan – perusahaan skala menengah – kecil. MySQL merupakan database yang digunakan oleh situs-situs terkemuka di Internet utnuk menyimpan datanya.

Software database MySQL kini dilepas sebagai software manajemen database yang open source, sebelumnya merupakan software database yang shareware. Shareware adalah suatu software yang dapat didistribusikan secara bebas untuk keperluan penggunaan secara pribadi, tetapi jika digunakan keperluan penggunaan secara pribadi, tetapi jika digunakan secara komersial maka pemakai harus mempunyai lisensi dari pembuatnya.]

MySQL termasuk jenis RDBMS (Relational Database Management System). Sehingga istilah seperti table, baris dan kolom tetap digunakan dalam MySQL. Pada MySQL, sebuah database mengandung beberapa table, satu table terdiri dari sejumlah baris dan kolom. Dalam kontek bahasa SQL, pada umumnya informasi tersimpan dalam tabel – tabel yang secara logik merupakan struktur dua dimensi yang terdiri atas baris – baris data (row atau record) yang berada dalam satu atau lebih kolom (column). Baris pada table sering disebut sebagai instance dari data sedangkan kolom sering disebut sebagai attributes atau field.

2.8 Macromedia Dreamweaver MX

Dreamweaver adalah suatu software editor HTML untuk memudahkan para web programmer dalam menciptakan site-site yang memukau. Dalam masa perkembangannya software editor HTML ini sudah mengalami banyak sekali perubahan dan semakin dapat menunjukan eksistensinya dalam pembuatan web. Dengan dreamweaver tidak perlu lagi mengetik seluruh tag HTML, Bahkan dreamweaver  dapat dengan mudah membuat suatu website yang dinamis. Memang software ini tidak begitu dikhususkan untuk pengguna awam. Melainkan para pengguna yang sudah kenal lebih dahulu dengan bahasa pemrograman HTML. Untuk versi MX-nya dreamweaver sudah dapat berkolaborasi dengan berbagai bahasa pemrograman yang bersifat server side seperti ASP, PHP, JSP, ColdFusion, dan masih banyak lagi.

 

2.8.1 Wajah Dreamweaver

Ketika pertama kali menginstal Dreamweaver MX, terdapat tawaran untuk interfacenya, apakah akan menggunakan interface Dreamweaver 4 atau menggunakan interface Dreamweaver MX. Hal ini dimaksudkan agar para pengguna Dreamweaver Mx yang kebanyakan adalah pengguna Dreamweaver 4 dapat dengan mudah berinteraksi dengan versi baru tetapi dengan wajah lama.

 

Gambar 2.1 Workspace Dreamweaver

2.8.2 Tools Pada Dreamweaver MX

2

4

 

 

Gambar 2.2 Toolbar Dreamweaver

  1. Show Code View, merupakan tombol yang diberikan Dreamweaver untuk pemakai yang ingin menambahkan script buatannya ke dalam code HTML.
  2. Show Code and Design Views, merupakan tombol yang diberikan Dreamweaver untuk pemakai yang ingin mengetahui sekaligus belajar tentang penggunaan tag HTML sekaligus mengetahui hasil designnya.
  3. Show Design View, pada tombol ini pemakai dapat membuat layout website dengan mudah.
  4. Toolbar, berfungsi sama dengan fungsi toolbar pada software lain, digunakan untuk menyimpan file, menyisipkan gambar, membuat tabel, dan sebagainya.

2.8.3 Property Inspector

Property Inspector memberikan fasilitas untuk melihat dan mengubah berbagai property objek yang dipilih atau teks. Setiap macam objek memiliki property yang berbeda.

 

 

Gambar 2.3 Property Inspector

2.8.4 Insert Bar

Komponen ini mengandung tombol-tombol untuk menyisipkan berbagai macam objek seperti image, tabel dan layer ke dalam dokumen. Setiap objek adalah kutipan kode HTML yang memberikan fasilitas bagi kita untuk mengatur atributnya sebagaimana kita menyisipkannya.

 

Gambar 2.4  Insert Bar

Tabel 2.6 Keterangan Insert Bar

Item

Keterangan

Hyperlink Untuk memberikan link pada objek yang dipilih.
E-Mail Link Untuk menempatkan link e-mail pada titik insertasi.
Named Anchor Untuk menempatkan named anchor pada link insertasi.
Insert Tabel Untuk menempatkan tabel pada titik insertasi.
Draw Layer Untuk membuat layer.
Image Untuk menyisipkan image pada titik insertasi tempat kursor berada.
Image Placeholder Untuk menyisipkan image placeholder pada titik insertasi.
Fire Works HTML Untuk menempatkan file HTML yang dibuat dengan program aplikasi Fireworks.
Flash Untuk menempatkan Flash movie pada titik insertasi.
Rollover Image Untuk menentukan dua file image yang masing-masing digunakan untuk membuat rollover (perubahan objek pada saat pointer berada di atasnya).
Navigation Bar Untuk menyisipkan satu set image yang berfungsi sebagai tombol navigasi di dalam site.
Navigation Rule Untuk menyisipkan garis horizontal pada titik insertasi.
Date Untuk menempatkan tanggal pada titik insertasi.
Tabular Data Untuk menempatkan tabel pada titik insertasi kemudian diisi dengan data tabel dari suatu file.
Comment Untuk menyisipkan comment di HTML pada titik insertasi.
Tag Chooser Untuk memilih tag yang akan disisipi dan hirarki tag yang sudah dikategorikan.

 

 

 

 

Kategori-kategori yang ada di dalam Insert Bar, adalah sebagai berikut:

  • Common

Common berisi tombol – tombol yang mempunyai fungsi membuat dan memasukkan object yang paling umum seperti memasukkan image, tabel, hyperlink, flash, template, tag chooser dan lainnya.

  • Layout

Layout berisi tombol – tombol yang berfungsi untuk membuat design layout website, seperti membuat table, tag div, layer dan frame.

  • Forms

Form berisi semua elemen – elemen seperti field text, text area, label, jump, menu, image field, dan lain sebagainya untuk mendesain form.

  • Text

Text berisi fungsi – fungsi yang banyak digunakan dalam pemformatan teks dalam halaman web.  Fungsi seperti bold, italic, strong, heading, list dan fungsi teks lainnya.

  • HTML

Kategori ini membantu anda memasukkan HTML ke dalam tag untuk garis horizontal, head contect, table, frame, script, dan lain sebagainya.

  • Server-Code

Server-code hanya akan berfungsi apabila anda bekerja dengan server berbahasa ASP, ASP.NET, CFML, JSP dan PHP.

  • Application

Kategori ini berfungsi unutk memasukkan element dinamis, seperti recordset, repeated regions, dan update form.

  • Flash Elements

Flash elements berisi tombol – tombol untuk memasukkan file – file Macromedia Flash.

 

2.9   Adobe Photoshop CS

Pallete

Option Bar

2.9.1    Area Kerja Photoshop

 

 

Menu Bar

Canvas

 

 

Gambar 2.5. Area kerja photoshop

Area kerja di photoshop terdiri atas enam bagian , yaitu Menu Bar, Option Bar, Pallete, Toolbox, Status Bar, dan Canvas.

  • Canvas adalah area atau layer yang akan digunakan untuk meletakan obek-objek dalam photosjop.
  • Menu Bar, berisi perintah-perintah dasar photoshop (menyimpan, mencetak, membuka file dan lain-lain) serta perintah-perintah pengeditan dan manipulasi grafik. Menu dikelompokan berdasarkan fungsinya. Contohnya, menu layer berisi perintah untuk bekerja pada layer.
  • Option Bar, digunakan untuk memilih setting yang akan berubah sesuai dengan tool yang diaktifkan. Contohnya, klik pada tool Rectangular Marquee, akan tampil option yang biasanya terletak dibawah menu bar
  • Toolbox, berisi tool yang digunakan untuk membuat, mengedit  dan memanipulasi gambar. Contohnya, tool Elliptical Marquee untuk membuat seleksi berbentuk elips atau lingkaran.
  • Pallete, digunakan untuk membantu dalam mengubah, mengatur  dan memilih berbagai parameter penyutingan dan pengolahan gambar.
  • Status Bar, berisi informasi ukuran file, ukuran gambar, waktu dan keterangan tool yang sedang aktif

 

2.10 Struktur Navigasi

Struktur navigasi adalah struktur atau alur dari suatu program yang merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan website. Menentukan struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat suatu website. Ada empat macam bentuk dasar dari struktur navigasi yang biasa digunakan dalam proses pembuatan website, yaitu:

 

2.10.1 Struktur Navigasi Linear

Struktur navigasi ini hanya memiliki satu rangkaian cerita yang berurut, yang menampilkan satu demi satu tampilan layer secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.

 

 

 

 

Gambar 2.6 Navigasi linear

 

2.10.2 Struktur Navigasi Non Linear

Struktur ini disebut juga struktur tidak berurut, merupakan pengembangan dari struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat pada struktur ini berbeda dengan percabangan pada struktur hirarki, karena pada percabangan ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan punya kedudukan yang sama.

 

 

 

 

 

 

 

 

 

 

Gambar 2.7 Navigasi Non Linear

 

2.10.3 Struktur Navigasi Hirarki

Struktur ini biasa disebut struktur bercabang, merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu

 

 

 

 

 

 

 

 

 

 

 

Gambar 2.8 Navigasi Hirarki

2.10.4 Struktur Navigasi Campuran

Struktur ini merupakan gabungan dari ketiga struktur sebelumnya. Struktur navigasi ini juga biasa disebut struktur navigasi bebas. Struktur ini banyak digunakan dalam pembuatan multimedia, sehingga dapat memberikan keinteraksian yang lebih tinggi.

 

 

 

 

 

 

 

 

 

Gambar 2.9 Navigasi Campuran

 

BAB III

Metodologi Penelitian & Pembahasan

3.1 Langkah – langkah perancangan Website Sekolah Dasar Negeri 3 Depok (SDN 3 DEPOK)

Pada bab ini akan disajikan struktur navigational dari website Sekolah Tinggi Transportasi Darat. Untuk membuat sebuah website Sekolah Dasar Negeri 3 Depok yang menyediakan fasilitas pendaftaran taruna/i offline, maka diperlukan sebuah web yang mampu melayani user yang akan mendaftarkan diri sebagai calon taruna/i melalui internet.

Dalam perancangan dan pembuatan website Sekolah Tinggi Transportasi Darat, penulis membaginya menjadi beberapa urutan langkah pengerjaan yaitu :

  1. Merancang dan Mempersiapkan struktur database
  2. Pembuatan design halaman

Untuk melaksanakan pembuatan program, penulis menggunakan suatu paket untuk mempermudah pengerjaan program yang bernama PHP Triad yang berisi Apache Web Server, PHP dan MySQL.

 

Dalam pembuatan website ini, ada 5 perangkat utama yang disediakan yaitu :

  • Web Server

Penulis menggunakan web server Apache versi 1.3.23 for Win32 yang dapat dijalankan pada sistem operasi Windows 9X atau yang lebih tinggi.

 

  • Web Browser

Sebenarnya jenis web browser yang digunakan disini tidaklah penting, karena pada dasarnya bahasa PHP merupakan bahasa skrip yang browser independent,

yang berarti skrip-skrip PHP yang digunakan akan diproses dan diterjemahkan pada posisi server (web server), bukan pada client (web browser) sehingga skrip-skrip PHP tersebut dapat dilihat di web browser manapun. Namun dalam pembuatan aplikasi ini, penulis menggunakan web browser Microsoft Internet Explorer versi 6.0 dari Windows XP Professional.

 

  • Database Server

Karena website ini menggunakan database, maka diperlukan database server sebagai penyedia informasi data yang kemudian dapat diolah ataupun dimanipulasi dari dalam website. Dalam aplikasi ini penulis menggunakan MySQL database server versi 3.23.48 for Win32 sebagai server basis data.

 

  • PHP

Agar dapat menerjemahkan dan memproses dokumen oleh web server, maka diperlukan PHP yang dapat dijadikan sebagai modul dari web tersebut. Disini penulis menggunakan PHP versi 2.2.3.

 

  • Macromedia Dreamweaver MX

Macromedia Dreamweaver MX ini digunakan agar penulis dapat melihat langsung tampilan halaman web di dalam lembar kerja setelah melakukan penulisan skrip.

 

Adapun hubungan antara perangkat yang tersebut diatas dapat dilihat pada gambar berikut :

 

 

ServerDB

MySQL

request

HTTP                                        MySQL

response

Gambar 3.1  Hubungan Antar Komponen Web

 

 

 

 

 

3.2  Pembuatan Struktur Navigasi

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Gambar 3.2 Struktur navigasi campuran halaman user

 

Struktur pada gambar 3.2 di atas hanya mengilustrasikan navigasi atau link ke halaman-halaman web yang berada di web server yang sama (local link) untuk user.

 

 

Gambar 3.3 Struktur navigasi campuran halaman khusus admin

 

 

Tahapan pertama dari proses pembuatan halaman web yaitu membuat navigasi. Navigasi dalam halaman web dilakukan dengan menggunakan link. Link atau hyperlink adalah suatu objek dalam web (teks, gambar, movie) yang berfungsi untuk menghubungkan satu halaman web ke halaman lainnya. Link tidak mempunyai fungsi sebagai penghubung antar halaman saja tetapi link juga bisa menghubungkan ke suatu bagian tertentu dalam halaman web yang sama.

Dalam tahapan ini penulis memberikan gambaran isi sebuah web secara konsep mengenai informasi apa saja yang akan ditampilkan dalam web tersebut. Agar hubngan antar halaman pada situ dapat terlihat jelas dan tersusun secara teratur maka penulis membuat navigasi.

Navigasi situs ini terdiri dari navigasi bagian halaman yang dapat diakses oleh user umum dan navigasi yang hanya dapat diakses oleh seorang administrator. Struktur navigasi yang digunakan baik untuk user umum maupun untuk administrator sama yaitu menggunakan navigasi campuran seperti yang telah digambarkan pada gambar – gambar diatas. Navigasi campuran merupakan navigasi yang terdiri dari gabungan beberapa navigasi seperti navigasi linier, non linier dan hierarki.

3.3 Pembuatan Design Input/Output

Tahapan kedua dari proses pembuatan halaman web yaitu membuat storyboard. Storyboard adalah suatu gambaran singkat atau rancangan umum tampilan dari halaman web yang dilengkapi dengan penjelasan mengenai halaman web tersebut. Storyboard dapat dibuat dalam penggalan – penggalan gambar. Dalam membuat storyboard hal yang perlu diperhatikan adalah tetap mengikuti rancangan struktur navigasi.

 

3.3.1 Design Halaman Home

 

Gambar  3.4 Rancangan Halaman Home

Halaman Home User terdiri dari :

Table 3.1 Keterangan Halaman Home user

Banner Menunjukkan judul dan gambar dari Sekolah Tinggi Transportasi Darat.
Tanggal Menunjukkan tanggal berapakah hari ini.
Link1 Link untuk mengakses halaman home.
Link2 Link untuk mengakses halaman administator
Link3 Link untuk mengakses halaman buku tamu.
Counter Menunjukkan jumlah pengunjung di website Sekolah Tinggi Transportasi Darat
Menu Tree View Menu untuk mengakses halaman – halaman lain yang ada di dalam web.
Manajemen User Menu yang berisi informasi seputar pendaftaran calon taruna/i baru serta pendaftaran online.
Header Menunjukkan tampilan animasi tulisan Sekolah Tinggi Transportasi Darat
Photo Berisi foto – foto kegiatan taruna/i dan lingkungan sekitar Sekolah Tinggi Transportasi Darat.
Text1 Berisi ucapan selamat datang kepada user.
Text2 Berisi berita – berita umum.
Text3 Berisi keterangan mengenai penulis.

 

Rancangan halaman home user dengan halaman – halaman yang disediakan dalam website ini beberapa sama, yang berbeda hanya pada bagian link2 dan text2. Bagian ini digunakan untuk meletakkan informasi yang dipilih oleh user.

 

 

 

 

 

3.3.2 Design Halaman Index Formulir

Gambar  3.5 Rancangan Halaman Index Formulir

Halaman Index Formulir terdiri dari :

Table 3.2 Keterangan Halaman Index Formulir

Banner Menunjukkan judul dan gambar dari Sekolah Tinggi Transportasi Darat.
Tanggal Menunjukkan tanggal berapakah hari ini.
Link1 Link untuk mengakses halaman home.
Link3 Link untuk mengakses halaman buku tamu.
Counter Menunjukkan jumlah pengunjung di website Sekolah Tinggi Transportasi Darat
Menu Tree View Menu untuk mengakses halaman – halaman lain yang ada di dalam web.
Manajemen User Menu yang berisi informasi seputar pendaftaran calon taruna/i baru serta pendaftaran online.
Nama Lengkap User diminta untuk menginput nama lengkapnya.
Tanggal Lahir Tempat user menginput tanggal,lahir dan tahun user. Formatnya adalah YYYY/ MM / DD.
Jenis Kelamin Berisi pilihan jenis kelamin yaitu Pria dan Wanita,dimana user harus mengisi salah satunya.
Alamat dan Telp Tempat user menginput alamat lengkap dan telepon.
Agama Tempat user menginput agama yang dianutnya.
Nama Orang Tua User diminta untuk menginput nama orang tuanya.
Email User diminta untuk menginput email.
Tahun Lulus Tempat user menginput tanggal, bulan dan tahun lulus user. Formatnya adalah YYYY/ MM / DD.
Jurusan/Program Berisi pilihan jurusan yang akan dipilih user. Terdiri dari D-II PKB dan D-IV Transportasi darat
Lokasi Test Berisi pilihan lokasi test yang dapat ditentukan oleh user itu sendiri. Pilihan lokasinya terdiri dari SDN 3 DEPOK Bekasi, Medan, Surabaya, Yogyakarta, Makasar, Palembang dan Samarinda.
Button1 Untuk simpan data
Button2 Untuk mengulangi data.
Text Berisi keterangan mengenai penulis.

3.3.3 Design Halaman Tabel Calon

Gambar  3.6 Rancangan Halaman Tabel Calon

 

Halaman Tabel Calon terdiri dari :

Table 3.3 Keterangan Halaman Tabel Calon

Banner Menunjukkan judul dan gambar dari Sekolah Tinggi Transportasi Darat.
Tanggal Menunjukkan tanggal berapakah hari ini.
Link1 Link untuk mengakses halaman home.
Link2 Link untuk mengakses halaman buku tamu.
Counter Menunjukkan jumlah pengunjung di website Sekolah Tinggi Transportasi Darat
Menu Tree View Menu untuk mengakses halaman – halaman lain yang ada di dalam web.
Manajemen User Menu yang berisi informasi seputar pendaftaran calon taruna/i baru serta pendaftaran online.
Header Menunjukkan tampilan animasi tulisan Sekolah Tinggi Transportasi Darat
Text1 Berisi nomor pendaftaran calon terdaftar.
Text2 Berisi nama calon terdaftar.
Text3 Berisi tanggal lahir calon terdaftar.
Text4 Berisi jurusan yang dituju oleh calon terdfatar.
Text5 Berisi tempat test yang dipilih oleh calon terdaftar.
Text6 Berisi keterangan mengenai penulis.

3.3.4 Design Halaman Buku Tamu

Gambar  3.7 Rancangan Halaman Buku Tamu

Halaman Buku Tamu terdiri dari :

Table 3.4 Keterangan Halaman Buku Tamu

Banner Menunjukkan judul dan gambar dari Sekolah Tinggi Transportasi Darat.
Tanggal Menunjukkan tanggal berapakah hari ini.
Link1 Link untuk mengakses halaman home.
Counter Menunjukkan jumlah pengunjung di website Sekolah Tinggi Transportasi Darat
Menu Tree View Menu untuk mengakses halaman – halaman lain yang ada di dalam web.
Manajemen User Menu yang berisi informasi seputar pendaftaran calon taruna/i baru serta pendaftaran online.
Header Menunjukkan tampilan animasi tulisan Sekolah Tinggi Transportasi Darat
Nama Tempat menginput nama user.
Alamat Tempat mengiput alamat user.
Email Tempat mengiput email user.
Ditujukan kepada Berisi pilihan tujuan komentar dikirimkan. Tujuan komentar tersebut terdiri dari Ketua SDN 3 DEPOK, Bagian penerimaan Taruna/i, Bagian Ketarunaan, Bagian Umum dan Lain – lain.
Komentar Berisi komentar user kepada bagian – bagian yang ditujukan oleh user.
Button1 Untuk simpan data.
Button2 Untuk mengulangi data.
Text Berisi keterangan mengenai penulis.

3.3.5 Design Halaman Struktur

Gambar  3.8 Rancangan Halaman Struktur

 

Halaman Struktur terdiri dari :

Table 3.5 Keterangan Halaman Struktur

Button1 Untuk kembali ke menu sebelumnya.
Button1 Untuk kembali ke menu home.
Gambar Berisi gambar struktur organisasi Sekolah Tinggi Transportasi Darat..

3.3.6 Design Halaman Galery

Gambar  3.9 Rancangan Halaman Galery

 

Halaman Galery terdiri dari :

Table 3.6 Keterangan Halaman Galery

Banner Menunjukkan tulisan Sekolah Tinggi Transportasi Darat.
Button Untuk kembali ke menu home.
Gambar Berisi gambar – gambar seputar kegiatan dan lingkungan  Sekolah Tinggi Transportasi Darat.

3.3.7 Design Halaman Konfirmasi Administrator

 

Gambar  3.10 Rancangan Halaman Konfirmasi Admin

 

Halaman Konfirmasi Administrator terdiri dari :

Table 3.7 Keterangan Halaman Konfirmasi Administrator

Banner Menunjukkan judul dan gambar dari Sekolah Tinggi Transportasi Darat.
Tanggal Menunjukkan tanggal berapakah hari ini.
Link1 Link untuk mengakses halaman home.
Link2 Link untuk mengakses halaman buku tamu.
Counter Menunjukkan jumlah pengunjung di website Sekolah Tinggi Transportasi Darat
Menu Tree View Menu untuk mengakses halaman – halaman lain yang ada di dalam web.
Manajemen User Menu yang berisi informasi seputar pendaftaran calon taruna/i baru serta pendaftaran online.
Header Menunjukkan tampilan animasi tulisan Sekolah Tinggi Transportasi Darat
Photo Berisi foto – foto kegiatan taruna/i dan lingkungan sekitar Sekolah Tinggi Transportasi Darat.
Nama Untuk menginput nama login admin.
Id Untuk menginput ID login admin.
Text Berisi keterangan mengenai penulis.

 

3.3.8  Design Halaman Menu Administrator

 

Gambar 3.11 Rancangan Halaman Menu Administarator

 

Halaman Menu Administrator terdiri dari :

Table 3.8 Keterangan Halaman Menu Administrator

Text1 Menunjukkan judul halaman.
Guest, Formulir Link untuk mengedit halaman.
Logout Untuk keluar dari halaman menu admin.

Halaman – halaman pada menu administrator pada umumnya sama. Hanya pada text2 yang akan berubah apabila user admin memilih menu yang tersedia dalam menu administrator.

 

3.4 Pembuatan Database

Database yang akan dirancang dinamakan “perhubungan” yang berisi tabel-tabel

awal sebagai berikut yang nantinya akan dipakai dalam perancangan situs:

3.4.1  Membuat nama database

Langkah-langkah pembuatan table tersebut adalah sebagai berikut :

  1. Buka browser.
  2. Pada browser address ketikan http://localhost/phpmyadmin.

 

 

Gambar 3.12 Tampilan halaman pertama phpmyadmin

  1. Pada kotak create new database, buat nama database yang digunakan, yaitu perhubungan. Klik tombol create, akan tampil selanjutnya dari halaman phpmyadmin.

 

 

Gambar 3.13 Tampilan halaman kedua phpmyadmin

 

3.4.2 Membuat tabel

  • Tabel Formulir

Cara pembuatannya dalam perintah MySQL adalah sebagai berikut :

mysql> create table formulir(

-> no_pendaftaran int(5),

-> nama varchar(30),

-> tgl date,

-> sex char(1),

-> jurusan char(1),

-> alamat varchar(100),

-> telepon varchar(12),

-> tahun_slta date,

-> test char(1),

-> date date,

-> nm_ortu varchar(30),

-> email varchar(25),

-> agama char(1));

 

Hasil dari pembuatan tabel diatas adalah sebagai berikut :

 

Gambar 3.14 Hasil Pembuatan Tabel Formulir

 

Adapun,  field-field yang ada di dalam tabel tersebut adalah sebagai berikut :

 

Tabel 3.9 Struktur Tabel Formulir

Field Type Keterangan
no_pendaftaran Int(5) Nomor Pendaftaran
nama Varchar(30) Nama User
tgl Date Tempat,tanggal lahir
sex Char(1) Jenis kelamin
jurusan Char(1) Jurusan yang diinginkan
alamat Varchar(100) Alamat user
telepon Varchar(12) Telepon user
tahun_slta Date Tanggal, bulan, tahun lulus
test Char(1) Tempat test
date Date Tanggal test
nm_ortu Varchar(30) Nama orang tua user
email Varchar(25) Email user
agama Char(1) Agama user

 

Penjelasan :

  1. Tanggal. Type filenya adalah date dimana format tanggal adalah YYYY/ MM / DD.
  2. Sex. Type filenya adalah char(1) dimana user dapat memilih salah satu dari 2 pilihan yang tersedia yaitu Pria dan Wanita.
  3. Jurusan. Type filenya adalah char(1) dimana user dapat memilih salah satu dari 2 pilihan jurusan yang tersedia yaitu  D-II PKB dan D-IV Transportasi Darat.
  4. Tahun_slta. Type filenya adalah date dimana format tanggal adalah YYYY/ MM / DD.
  5. Test. Type filenya adalah varchar(1) dimana user dapat memilih salah satu dari 7 pilihan lokasi test yang tersedia yaitu  SDN 3 DEPOK Bekasi, Medan, Surabaya, Yogyakarta, Makasar, Palembang dan Samarinda.
  6. Agama. Type filenya adalah char(1) dimana user dapat memilih salah satu dari 6 pilihan agama yang tersedia yaitu  Islam, Kristen Protestan, Kristen Khatolik, Hindu, Budha dan lain – lain.
  7. Date. Type filenya adalah date dimana format tanggal adalah YYYY/ MM / DD.

 

  • Tabel Buku Tamu

Cara pembuatannya dalam perintah MySQL adalah sebagai berikut :

mysql> create table buku_tamu(

-> id int(5);

-> nama varchar(30),

-> alamat varchar(100),

-> email varchar(25),

-> ditujukan char(1),

-> komentar text);

 

Hasil dari pembuatan tabel diatas adalah sebagai berikut :

 

Gambar 3.15 Hasil Pembuatan Tabel Bukutamu

 

Adapun,  field-field yang ada di dalam tabel tersebut adalah sebagai berikut :

 

Tabel 3.10  Struktur Tabel Buku Tamu

Field Type Keterangan
id Int(5) Nomor urut
nama Varchar(30) Nama user
alamat Varchar(100) Alamat user
email Varchar(25) Email user
ditujukan Char(1) Ditujukan kepada
komentar Text Komentar user

 

Penjelasan  :

Ditujukan kepada bertype file char(1), dimana user dapat memilih 5 pilihan dari bagian – bagian yang terdiri dari Ketua SDN 3 DEPOK, Bagian Penerimaan Taruna/i, Bagian Ketarunaan, Bagian Umum dan lain – lain.

 

 

 

  • Tabel Biodata

Cara pembuatannya dalam perintah MySQL adalah sebagai berikut :

mysql> create table biodata(

-> nama varchar(30),

-> password varchar(10);

 

Hasil dari pembuatan tabel diatas adalah sebagai berikut :

 

Gambar 3.16 Hasil Pembuatan Tabel Biodata

 

Adapun,  field-field yang ada di dalam tabel tersebut adalah sebagai berikut :

 

Tabel 3.11 Struktur Tabel Biodata

Field Type Keterangan
nama Varchar(30) Nama login admin
password Varchar(20) Password admin