Contoh Pembuatan Manual Program Website

5.         Deskripsi dan manual program

Hallo teman-teman semua, disini akan sedikit saya share mengenai cara membuat Deskripsi dan manual program secara   ringkas. Kenapa Ringkas? Karena kebanyakan dosen sudah tau akan pola coding yang dibuat oleh mahasiswanya. Mungkin             cuma perlu diberikan penjelasan saja menngenai bagian-bagian coding yang rumit. Contohnya bisa dilihat dibawah ini.

            a. Tab Menu Home

homepage

                                                Gambar 5 .1 Tampilan Home

            Tab menu home merupakan tampilan utama pada website ini,  tampilan ini otomatis akan muncul ketika pengunjung website masuk pertama kali dengan url://index.html. Pada tab menu home ini, user bisa melaukan proses order dan melihat video highlights dari event-event yang pernah ditangani. Selengkapnya bisa dilihat pada gambar 5.1.

Dalam proses pembuatan halaman utama ini, ada beberapa konten yang ada dalam website ini, yaitu header, slider, container 960, menu footer dan footer. Untuk slider, kami menggunakan library Jquery versi 1.4.2 roundabout. Pemanggilan kelas jquery cukup simpel dan mudah, bisa dilihat pada gambar 5.1.2

inst

Gambar 5.1.2 Code Insert Jquery

            Selain perintah pemanggilan Jquery, perintah yang digunakan untuk memasukkan gambar ke dalam slider cukup simpel, dengan menggunakan perintah list untuk masing-masing gambar yang ingin dimasukkan. Untuk menghilangkan bullet yang ada disamping gambar, bisa menambahkan list-style-type : none; pada kelas css myRoundabout

gallery

                                                Gambar 5.1.3 Code Insert Gambar

            Untuk perintah yang terdapat pada header, container 960, menu footer dan footer murni menggunakan perintah html dan css, tanpa tambahan library Jquery maupun bootstrap. Sehingga developer web bisa dengan mudah untuk mengubah isi atau konten yang ada didalamnya.

c.         Menu Order

order

                                                Gambar 5.2 Menu Order

Halaman ini akan muncul ketika pengunjung menekan tombol order pada halaman index, halaman ini akan muncul dengan url://formorder.html berfungsi bila pengunjung ingin melakukan proses pesan tempat atau order peralatan, yang mana dalam tab menu ini pengunjung disuruh memasukkan nama, alamat, nomor HP dan jenis paket dan alat yang akan disewa. Selengkapnya bisa dilihat pada gambar 5.2.

Proses pembuatan menu order ini menggunakan html dan css agar tampilan pada menu order ini terlihat seragam dan terstruktur.

form

                                    Gambar 5.2.1 Code Menu Order

Dalam pembuatan form ini didalam tag <body> html terdapat tag <form> yang berguna agar elemen-elemen form dapat diaktifkan dan digunakan. Didalam tag <form> terdapat perintah <fieldset> yang berfungsi untuk mengelompokkan beberapa objek seperti <input>, <option> dan <select> yang ada dalam tag <body>. Untuk implementasi penggunaan masing masing tag bisa dilihat pada gambar 5.2.1

NB : Screenshoot gambar merupakan cuplikan coding bukan full coding

Tulisan ini boleh dicopy/diperbanyak dengan mencantumkan sumbernya.

 

 

 

 

 

 

Categories: Pemrograman web | Tags: , , , , , | Tinggalkan komentar

Navigasi pos

Ada Tambahan ?

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Blog di WordPress.com.

%d blogger menyukai ini: