modul web programming i d - yosephta.files.wordpress.com … · modul web programming i d.iii 2...

MODUL WEB PROGRAMMING I D.III

2

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT, yang telah memberikan rahmat

dan hidayahnya sehingga modul Web Programming I ini dapat diselesaikan dengan baik.

Selanjutnya modul ini disusun untuk memberikan gambaran dan arahan bagi mahasiswa

yang mempelajari bidang pemrogramman website berbasis php dan mysql. Dengan

menggunakan metode “Belajar Mudah, Cepat Dan Menyenangkan” karena modul ini

disertai contoh kasus, sehingga lebih memudahkan dalam memahami setiap step

pemrograman php menggunakan editor Adobe Dreamweaver dan Sublime Text 3.

Tak lupa penulis mengucapkan banyak terima kasih kepada semua pihak yang

telah membantu dengan tenaga dan pikirannya, terima kasih juga kepada rekan–rekan

instruktur, dosen dan semuanya yang tidak bisa disebutkan satu persatu, yang selalu

mendukung penulis sehingga modul ini sehingga dapat selesai sesuai yang kita inginkan

semua.

Penulis menyadari masih banyak kekurangan dalam penyusunan modul ini. Untuk

itu saran dan kritik yang membangun sangat penulis harapkan guna perbaikan dan

pengembangan modul ini ke depan.

Akhir kata penulis berharap semoga modul Web Programming I ini dapat dipergunakan

sebaik-baiknya dan dapat dijadikan referensi untuk mahasiswa umum yang ingin

mempelajari bidang pemrograman web dengan bahasa pemrograman php.

Jakarta, Juli 2017

Penulis


3

Daftar Isi

Cover……………………………………………………………………………………………………………………………………… 1

Kata Pengatar................................................................................................................................. 2

Daftar Isi ......................................................................................................................................... 3

PERTEMUAN 1 Kebutuhan Software, Penentuan Project Presentasi, Penjelasan Tugas ...................................... 4

PERTEMUAN 2 PHP, MYSQL dan Boostrap ............................................................................................................ 6

PERTEMUAN 3 Konsep Project dan Perancangan Database pada PhpMyadmin ................................................ 16

PERTEMUAN 4 Perancangan Index User, Home Admin dan Menu ..................................................................... 26

PERTEMUAN 5 Perancangan Data Master Admin/Dosen, View Progress Mahasiswa dan Login ....................... 33

PERTEMUAN 7 Hasil Implementasi Aplikasi ......................................................................................................... 48

Daftar Referensi ........................................................................................................................... 54


4

PERTEMUAN 1

Kebutuhan Software, Penentuan Project Presentasi, Penjelasan Tugas

I. Kebutuhan Software

1. Software yang digunakan

Software yang akan digunakan pada materi web programming ini adalah sebagai

berikut:

a. XAMPP Versi 5.5.30 32Bit

b. Adobe Dreamweaver CS.6

c. Template Bootstrap (AdminLTE version 2.3.0)

2. Spesifikasi Minimum

a. Sistem Operasi : Windows 7

b. RAM : 2 GB

c. HDD : 120 GB

II. Penentuan Project Presentasi

III. Penjelasan Tugas

1. Tugas Project Kelompok

a. Mahasiswa haruskan untuk membuat project berupa program bisnis menggunakan

bahasa pemrogramman PHP dan database MySQL.

b. Project dikerjakan secara berkelompok

c. Project akan dipresentasikan setelah UTS dan nilainya akan menjadi nilai UAS

d. Penilaian project dilihat dari presentasi dan jalannya program.

e. Penilaian diambil secara individu dan kelompok.

2. Kriteria Penilaian

a. Penilaian secara kelompok:

1) Penilaian database = 10% (Pembuatan database, tabel, index)

2) Penilaian form, coding dan report = 60% (Pembuatan form, penggunaan objek

dan properties, koneksi database, sintaks program dan prosedur, logika

program)

3) Penilaian testing, presentasi = 30% (Eksekusi program, kesesuaian tampilan,

cara presentasi)


5

b. Penilaian secara individu:

1) Range nilai: 0-100

2) Nilai individu diketahui pada saat tanya jawab, ketika kelompok mereka

melakukan presentasi.

3) Nilai rata-rata per individu=(total nilai kelompok + nilai individu) / 2.

4) Nilai rata-rata per individu yang diinput di web sebagai nilai UAS.

c. Contoh Penilaian

Database : 10% x 100 =10

Form. Coding, report : 60% x 100 = 60

Testing, Presentasi : 30% x 100 = 30

TOTAL NILAI KELOMPOK : 100

NILAI INDIVIDU : 100

Nilai rata-rata per individu : (100+100)/2 =100

Nilai UAS mahasiswa tersebut = 100


6

PERTEMUAN 2

PHP, MYSQL dan Boostrap

I. Web Programming

Apa sih web programing itu ? penjelasan mengenai web programing dapat difahami

melalui beberapa tahap, diantaranya pemahaman mengenai tools yang ada pada web

programing seperti HTML, CSS, PHP, JAVA SCRIPT dan lain sebagainya.

1. HTML

HTML atau kepanjangan dari Hypertext Markup Language adalah Bahasa yang

digunakan untuk menulis halaman website [1]. HTML sendiri bersifat fleksible yang tidak

tergantung pada satu sistem operasi. Dokumen dokumen HTML dapat dijalankan dan

tampilkan melalui web browser.

Sedangkan website sendiri berarti keseluruhan halaman-halaman web yang terletak

dalam sebuah domain yang mengandung informasi [2]. Website biasanya tidak hanya terdiri

pada satu halaman saja, tetapi ada terdapat banyak halaman yang masing masing memuat

informasi dan data yang berbeda beda serta saling terhubung melalui hyperlink.

Ini berarti seluruh isi halaman dokumen yang terdapat pada sebuah website adalah

informasi-informasi yang ditulis menggunakan Bahasa kode HTML yang terletak pada sebuah

domain dan dapat ditampilkan melalui web browser pada berbagai sistem opresai komputer.

Sumber: https://www.w3schools.com/default.asp

Gambar 1. Dokumen dasar HTML

Saat ini Bahasa kode HTML tidak hanya dapat memuat konten berupa text dokumen

saja akan tetapi dokumen dokumen lain seperti music, video, gambar, games berbasis flash

https://www.w3schools.com/default.asp


7

dan lain sebagainya. Ini tidak berarti saat kode html pertama kali dibuat, dapat langsung

menjalankan file file tersebut akan tetapi melalui proses pembaharuan pada beberapa kode

html.

HTML pertama kali dibuat pada tahun 1980 oleh Timothy John Barners Lee yang pada

saat itu dia sedang bekerja pada sebuah lembaga riset fisika terbesar di dunia bernama

CERN (Organisation Européene pour la Recherche Nucléaire).

Tujuan dibuatnya kode HTML ini adalah untuk memfasilitasi pembagian dan

pembaharuan informasi diantara para peneliti, agar setiap peneliti dapat melakukan share

atau membagikan ilmu terhadap apa yang telah ditemukan selama proses penelitian. Sejak

saat itu perkembangan Bahasa kode HTML mengalami perkembangan sampai dengan saat ini.

Versi terbaru kode HTML pada tahun 2017 ini adalah HTML versi ke 7.

2. CSS

CSS (Cascading Style Sheet) adalah satu Bahasa untuk mengatur halaman web yang

berfungsi untuk memisahkan antara desain dengan konten [4]. CSS Bahasa yang

menggambarkan gaya dokumen HTML atau bagaimana elemen HTML harus ditampilkan [5].

CSS merupakan Bahasa kode yang berfungsi untuk mengatur seluruh tampilan website

dengan beberapa pengaturan ulang pada tag-tag HTML sesuai dengan gaya dokumen seperti

apa yang kita ingin tampilkan. Biasanya penulisan kode CSS terpisah dengan kode HTML

(Desain dan Konten). Disini kita berbicara pengelompokan pengaturan pada satu tampilan

website.

HTML hanya berisi konten konten dan pengaturan letak informasi sedangkan CSS

berperan sebagai pengatur display dan desain seperti warna background, penggunaan font,

jarak antara baris kontent pada sebuah tampilan website.

Sumber: https://www.w3schools.com/css/css_syntax.asp

Gambar 2. Code CSS untuk tag HTML

https://www.w3schools.com/css/css_syntax.asp


8

3. Aplikasi Website

Aplikasi Web merupakan jenis aplikasi yang dapat dijalankan melalui browser dengan

menggunakan atau tidak menggunakan jaringan internet [11].

Aplikasi Web atau Website Aplication adalah satu jenis aplikasi yang dapat dijalankan

dan di akses melalui halaman web browser dan dibangun menggunakan Bahasa

pemrograman tertentu. Salah satu Bahasa pemrograman yang paling banyak digunakan

dalam pembuatan aplikasi berbasis website ini adalah PHP. Sedangkan proses membangun

dan mengembangkan sebuah aplikasi berbasis website (Web Developing) disebut dengan web

programming.

4. Web Programming

Web programming merupakan proses atau cara membuat program/web untuk

kebutuhan akses internet [9]. Pemrograman web mengacu pada penulisan, markup dan

coding yang terlibat dalam pengembangan web, yang meliputi konten web, web klien dan

server scripting dan keamanan jaringan. Bahasa yang paling umum digunakan untuk

pemrograman Web antara lain XML, HTML, JavaScript, Perl 5 dan PHP.

Pemrograman web berbeda dari hanya pemrograman, yang membutuhkan

pengetahuan interdisipliner pada aplikasi, client dan server scripting, dan teknologi database

[8].

Dari penjelasan di atas maka dapat ditarik kesimpulan bahwa web programming adalah

suatu proses pembuatan atau pengembangan aplikasi berbasis website secara keseluruhan

baik dari sisi client maupun server dengan menggunakan Bahasa pemrogramman tertentu

yang dapat dijalankan pada jaringan internet.

Pengetahuna interdisipliner diperlukan untuk dapat memahami dan menguasai

pemorgramman website, karena cakupan web programming cukup luas dan tidak hanya

menangani satu sisi saja (client atau server).

Beberapa tahapan pemahaman harus dipelajari terlebih dahulu seperti pemehaman

mengenai Bahasa kode HTML dan CSS, Bahasa Pemrogramman seperti PHP, Pemahaman

tentang Javascript, Penambahan script pendukung seperti Ajax, JQuery dan sebagainya serta

pemahaman mengenai framework (opsional).

Penggunaan tools dan software pada pemrogramman berbasis web ini cukup banyak

dan pada awalnya terpisah satu sama lain seperti tools dasar, diantaranya:


9

1. Apache yang berfungsi sebagai web server untuk dapat menjalankan perintah-perintah

PHP dan MySQL.

2. DBMS (Database Management System) yang berfungsi sebagai aplikasi untuk

mengimpan, mengelola dan menampilkan data[10].

3. PHP berfungsi sebagai Bahasa pemrogramman.

4. PHP, HTML dan CSS Editor yang berfungsi sebagi editor dimana kita menuliskat script-

script PHP, HTML, CSS dll.

II. PHP

PHP (Hypertext Preprocesor) Satu Bahasa pemrograman yang digunakan untuk

menerjemahkan baris kode program menjadi kode mesin yang dapat dimengerti oleg

komputer yang bersifat server side yang dapat ditambahkan kedalam HTML [6].

Adalah Rasmus Lerdorf pada tahun 1995 bahasa pemrogramman PHP pertama kali

dibuat. Pada awalnya PHP adalah kepanjangan dari Personal Homepage yang berupa

sekumpulan script bernama FI ( Form Interpreted) yang digunakan untuk mengolah data form

dari sebuah website. Selanjutnya perusahaan Zend menulis ulang form interpreter PHP

menjadi lebih baik tahun 1997. Sehingga pada tahun berikutnya 1998 perusahaan tersebut

resmi meluncurkan interpreter baru untuk PHP yaitu PHP 3.0 dan sekaligus merubah

singkatan PHP menjadi Hypertext Preprocessing [6].

Pada dasarnya cara kerja dari php adalah berupa request dan respon antara client/ user

dan server. Pertama client/user akan melakukan request permintaan file php melalui media

browser/web browser (Internet Exploler, Google Chrome dll) yang selanjutnya request

tersebut di teruskan oleh browser ke server.

Server akan menerjemahkan request tersebut kedalam Bahasa komputer dan

berikutnya server akan merspon request tersebut dan mengirimkan kembali respon dari

server ke client/user dalam betuk file HTML yang ditampilkan pada web browser client/user.

Gambar 3. Prinsip Kerja PHP


10

PHP merupakan salah satu Bahasa pemrograman yang cukup banyak digunakan oleh

beberapa pengembang aplikasi website saat ini. Salah satu alasannya adalah lisensi dari PHP

itu sendiri yang bersifat Open Source, sehingga para pengembang dapat membuka dan

mengetahui cara kerja PHP. Tiap tiap pengembang dapat dengan bebas mengembangkan,

mengubah ataupun memperbaiki jika ditemukan kelemahan-kelemahan pada PHP.

Sumber: https://w3techs.com/technologies/overview/programming_language/all

Gambar 4. Hasil survey penggunaan bahasa pemrograman

server side untuk situs web

Kelebihan dari penggunaan Bahasa pemrogramman sendiri adalah sebagai berikut:

a. Multi Platform artinya dapat berjalan di berbagai mesin dan sistem operasi (Linux, Unix,

Macintosh, Windows dll)

b. Bersifat open source yang berarti dapat dapat di gunakan oleh siapa saja secara gratis

c. Banyaknya web server yang dapat mendukung PHP

d. Karena sifatnya yang open source sehingga memudahkan para pengembang dalam

mengembangkan aplikasi berbasis PHP dikarenakan banyaknya komunitas-komunitas

pengembang PHP dan developer yang siap membantu.

e. Dapat mendukung banyak database, dll [6].

Diantara banyaknya kelebihan PHP diatas tidak menutup kemungkinan bahwa PHP juga

memiliki kekurangan. Kekurangan-kekurangan PHP antara lain:

a. PHP tidak mengenal package

b. Jika tidak di encode, kode PHP dapat dibaca oleh semua orang

c. PHP memiliki kelemahan keamanan [6].

https://w3techs.com/technologies/overview/programming_language/all


11

1. Sintaks Dasar PHP

Jika berbicara mengenai sintaks, berarti berbicara tentang urutan, struktur komponen

pembangun dalam satu kalimat. Sintaks dasar Bahasa pemrograman php adalah suatu

struktur urutan kode perogram php. Sintaks php dapat ditulis dengan berbagai cara,

diantaranya:

a. <? ………………. ?>

b. <?php …………………… ?>

c. <% ……………… ?>

Pada kode program php dapat dibagi menjadi tiga bagian, bagian pertama adalah tag

pembuka php ( <? ). Script tag pembuka di gunakan untuk penanda awal penulisan script php

pada dokumen.

Bagian kedua ( antara tag pembuka dan penutup ) adalah isi dari script php. Dan bagian

terakhir ( ?> ) adalah tag penutup script php digunakan untk menandai akhir dari penulisan

cript php. Contoh penulisan seperti gambar dibawah ini

Sumber: https://www.w3schools.com/php/default.asp

Gambar 5. Script PHP

PHP adalah tools yang digunakan untuk membuat halaman website yang dinamis dan

iteraktif [7]. Hal ini berarti php adalah Bahasa pemrograman yang bersifat server side scripting

(script yang diterjemahkan pada sisi server) untuk menghasilkan sebuah tampilan website

dinamis dimana baris code php tersebit dapat ditambahkan/disisipkan pada baris kode html.

https://www.w3schools.com/php/default.asp


12

Sumber: https://www.w3schools.com/php/default.asp

Gambar 6. Script PHP yang telah disisipkan

pada kode HTML

2. Variable PHP

Hampir pada setiap Bahasa pemrogramman terdapat variable, pada umumnya variable

ini bersifat fleksible karena dapat diisi nilai sesuai dengan kebutuhan program. Variable adalah

suatu tempat atau wadah yang berfungsi untuk menampung sebuah nilai, yang mana nilai

tersebut dapat diubah sesuai dengan kebutuhan.

Pada pemrograman PHP penggunaan variable biasanya ditandai dengan karakter dollar

($), dengan ketentuan sebagai berikut:

a. Diawali dengan tanda dollar ($)

b. Setelah tanda dolar diikuti dengan karakter huruf (tidak boleh angka) atau boleh

menggunakan tanda under line ( _ ).

c. Digit selanjutnya (setelah huruf atau under line) boleh menggunakan angka.

Sesuai dengan kegunaannya variable ini nanti dapat menapung nilai (value) sebuah

objek yang di kirimkan atau di terima dari form-form yang dijalankan.

3. Parameter PHP

Pada php terdapat banyak parameter, yang paling umum digunakan dalam proses

pengiriman atau penerimaan data adalah parameter POST dan GET.

a. Parameter POST

Parameter POST pada php ditulis dengan di dahului tanda dollar ($_POST). Parameter

POST digunakan untuk mengirimkan nilai objek pada sebuah form untuk selanjutnya

dilakukan pemrosesan data dari nilai nilai objek yang dikirimkan. Nilai nilai objek akan

diterima dan ditampung terlebih dahulu sebelum berikutnya dilakukan pemrosesan data.



13

Alamat pengiriman pada parameter POST dapat menggunakan form action yang berfungsi

untuk menentukan kemana data akan dikirimkan.

b. Parameter GET

Parameter GET ($_GET) pada PHP digunakan untuk mengirim, mengambil dan menerima

nilai melalui fasilitas hyperlink. Hyperlink dapat disisipkan nilai tertentu untuk di

ikutsertakan dalam pengiriman data dalam proses menghubungkan file. Berikutnya nilai

yang terkandung dalam hyperlink akan di ambil menggunakan parameter GET ($_GET)

4. Operator PHP

Hal yang hamper tidak pernah di lewatkan pada sebuah Bahasa pemrograman adalah

penggunaan Operator. Secara umum terdapat banyak operator yang dapat digunakan pada

sebuah Bahasa pemrogramman diantaranya:

a. Oprator Aritmatika

Operator aritmatika adalah operator dasar yang digunakn pada Bahasa pemrograman

untuk melakukan perhitungan seperti penambahan, pengurangan, perkalian, pembagian

dan modulus/sisa hasil bagi

b. Operator Logika

Operator logika pada pemrogramman berfungsi sebagai pembanding/melakukan

perbandiang antara dua nilai kondisi yang hanya dapat menghasilkan salah satu kondisi

benar(true) atau salah (false)

c. Oprator Perbandingan

d. Operator Assigment

II. MYSQL

Kumpulan data yang terkait [11]. Tujuan dibuatnya suatu database adalah untuk

memmudahkan dalam pengaksesan data [11].

DBMS (DatabaseManagement System) adalah software untuk mengelola database. Ada

beberapa software dbms baik yang bersifat open surce ataupun berbayar. Salah satu software

dbms open source adalam MySQL. Software pengelola database ini cukup handal dalam

mengelola database dan cukup banyak digunakan.


14

Akan tetapi saat ini MySQL telah diakuisisi oleh perusahaan RDBMS yang lain yakni

ORACLE. Sehingga menyebabkan MySQL tidak bersifat GPL (General Public License). Setelah

diakuisisi oleh Oracle MySQL menjadi sebuah software yang berlisensi Proprietary (perangakt

lunak perorangan / perangkat lunak berbayar).

Pada akhirnya para pengembang MySQL mulai mebangun software DBMS baru yaitu

MariaDB. MariaDB adalah sistem manajemen database relasional yang dikembangkan dari

MySQL. MariaDB dikembangkan oleh komunitas pengembang yang sebelumnya berkontribusi

untuk database MySQL [12].

III. Bootstrap

1. Apa itu bootstrap ?

Bootstrap adalah sebuah framework dalam pembangunan sebuah halaman website

yang dengan menggunakan framework tersebut proses pembuatan website menjadi lebih

cepat dan mudah. Desain website dengan menggunakan framework memiliki kemempuan

responsive yang berarti halaman website otomatis dapat menyesuaikan diri agar terlihat baik

pada semua jenis perangkat, mulai dari mobile sampai dengan desktop [14].

Bootstrap mencakup tamplate desain berbasis HTML dan CSS untuk tipografi, form,

tombol, table, navigasi, modals, carousels gambar, plugin JavaScript dan lain sebagainya.

2. Keunggulan Bootstrap

a. Mudah digunakan:

Tidak hanya kemudahan bagi developer website akan tetapi siapa saja yang memiliki

pengetahuan dasar tentang HTML dan CSS bisa mulai menggunakan Bootstrap.

b. Fitur responsif:

CSS responsif Bootstrap menyesuaikan diri dengan ponsel, tablet, dan desktop.

Sehingga pengembang website tidak perlu repot untuk membuat website dalam

berbagai versi.

c. Pendekatan Mobile-first:

Pada Bootstrap 3, gaya mobile-first adalah bagian dari kerangka inti. Ini merupakan

strategi dalam proses pengembangan website yang mengedepankan dalam

merancang tampilan di layar kecil (mobile phone) kemudian mengembangkan

tampilan ke layar besar(desktop).


15

d. Kompatibilitas browser:

Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet

Explorer, Safari, dan Opera)

3. Menggunakan Bootstrap

Terdapat dua cara untuk memulai menggunakan Bootstrap dalam mengembangkan

sebuah website :

a. Mendownload framework Bootstrap melalui halaman www.getbootstrap.com

Keuntungan mendownload framework secara langsung dapat memudahkan

pengembangan website walaupun dalam kondisi tidak terkoneksi dengan internet.

b. Menyertakan engine Bootsrtap dari CDN (Content Delivery Network)

Keuntungan menggunakan Bootstrap CDN adalah proses pengaksesan website cukup

cepat karena CDN akan memastikan bahwa begitu pengguna meminta file ke server

maka pengguna akan dilayani dari server yang paling dekat.


16

PERTEMUAN 3

Konsep Project dan Perancangan Database pada PhpMyadmin

I. Konsep dan Rancangan Project

Aplikasi yang akan dibangun adalah sebuah aplikasi konsultasi bimbingan (Konseling

Tugas Akhir) berbasis website, yang nantinya dapat diakses oleh masing-masing mahasiswa

untuk mengetahui progres bimbingan tugas akhirnya. Untuk lebih jelasnya dapat di lihat pada

gambar use case dibawah ini.

A. Use Case Diagram

Gambar 7. Use Case Sistem Informasi Konseling

Penjelasan Use Case:

1. Aktor Mahasiswa

Pada sistem ini mahasiswa dapat mengakses data terkait dengan progress bimbingan

konseling tugas akhir yang sedang dilakukan kepada dosen pembimbing. Mahasiswa dapat

melihat progress bimbingannya dalam bentuk diagram persentase per bab. Selain itu

mahasiswa juga dapat melihat catatan kegiatan bimbingan dari dosen pembimbingnya serta

uc Use Case Model

Sistem Informasi Konseling

Mahasiswa

Mengakses

Informasi Progres

Konseling Tugas

Akhir

Dosen

Login

Mengelola Data

Mahasiswa

Mengelola Data

Periode Konseling

Mengelola Data

Progress Konseling

Logout


17

dapat mencetak diagram progress bimbingan kedalam berbagai format file seperti Jpg, Png,

Pdf.

2. Aktor Dosen

Dosen dalam hal ini bertindak sebagai pembimbing sekaligus operator sistem, dimana

dosen akan meginput data progress bimbingan setelah kegiatan bimbingan face to face atau

bimbingan secara tidak langsung terjadi. Dosen dapat menambahkan data mahasiswa,

progress bimbingan, periode bimbingan dan semua data tersebut dapat juga di ubah sesuai

dengan kebutuhan.

B. Activity Diagram

Cara kerja dari sistem ini dapat dijelaskan melalui activity diagram dibawah ini sesuai

dengan desai Use Case yang telah dibuat.

1. Mengakses Progres Konseling Tugas Akhir

Gambar 8. Activity Diagram Mengakses Progres Konseling Tugas Akhir

act Mengakses Progres Konseling Tugas Akhir

SystemMahasiswa

Mulai

Mengakses Sistem Menampilkan Menu

System

Memilih Menu

Mahasiswa - Data

Bimbingan

Menampilkan Data

Bimbingan Mahasiswa

Memilih Menu ViewMenampilkan Data

Progres Bimbingan

Selesai


18

2. Mengelola Data Mahasiswa

Gambar 9. Activity Diagram Mengelola Data Mahasiswa

act Mengelola Data Mahasiswa

SystemDosen

Mulai

Memilih Menu Data

Bimbingan

Menampilkan Data

Mahasiswa Bimbingan

Menambah Data Siswa ?

Klik Tombol Add DataMenampilkan Form

Isisan Data Mahasiswa

Mengisi dan Menyimpan

Data Mahasiswa

Menyimpan Data

Mahasiswa

Mengubah Data Mahasiswa

Mengklik Link

EditMenampilkan Data

Mahasiswa

Merubah Dan

Menyimpan Data

Mahasiswa

Menyimpan Data

Mahasiswa

Menghapus Data

Mahasiswa ?

SelesaiMengklik Link

Delete

Menghapus Data

Mahasiswa

Ya

Ya

Tidak

Tidak

Tidak

Ya


19

3. Mengelola Progres Bimbingan

Gambar 10. Activity Diagram Mengelola Progres

C. Database

Setelah memahami kebutuhan sistem diatas, selanjutnya kita akan merancang

kebutuhan data untuk memenuhi spesifikasi sitem yang akan dibangun. Berikut ini adalah

konsep database dan struktur table yang penulis jelaskan dalam bentuk ER Diagram dibawah

ini:

act Mengelola Progres Bimbingan

SystemDosen

Mulai

Memeilih Menu Progres

Bimbingan Menampilkan Data

Progres Bimbingan

Mahasiswa

Menambah Data Progres

Bimbingan Baru ?

Mengkil Tombol

Add Data

Menampilkan Form Isian

Progres Bimbingan

Mengisis Form dan

Menyimpan Data

Progres

Menyimpan Data Progres

Mengubah Data

Progres?

Mengklik Link Edit Menampilkan Data

Progres Bimbingan

Mengubah Data

ProgresMenyimpan Data Progres

Menghapus Data

Progres?Mengklik Link

DeleteMenghapus Data Progres

Selesai

Tidak

Ya

Ya

Ya

Tidak

Tidak


20

Gambar 11. ER Diagram Sisten Informasi Konseling

II. Langkah awal membangun aplikasi

A. Kebutuhan Tools

Sebelum memulai membangun aplikasi, ada beberapa file yang harus di persiapkan

guna mempercepat proses pembanguna sebuah apilkasi diantaranya :

1. Pastikan Local Server XAMPP (XAMPP Versi 5.5.30 32Bit) telah terinstall pada komputer

2. Memiliki kode editor berbasis desain seperti Adobe Dreamweaver CS 6 dan kode editor

berbasis teks seperti Sublime Text atau Notepad++ yang semuanya telah terinstall di

komputer

3. Template Bootstrap (AdminLTE version 2.3.0) yang dapat di download secara langsung

dari situs aslinya atau link yang telah penulis siapkan melalui link dibawah ini:

https://app.box.com/s/1471sl7tgajudoiw878wlgplym3k07kn

4. Template Diagram (Highcharts-5.0.10) yang dapat langsung di download dari situs

aslinya atau link yang telah penulis siapkan melalui link dibawah ini:

https://app.box.com/s/erkgx3887mk048scbdqsua5pg18p6zi1

https://app.box.com/s/1471sl7tgajudoiw878wlgplym3k07kn

https://app.box.com/s/erkgx3887mk048scbdqsua5pg18p6zi1


21

B. Setting Server

Langkah awal adalah dengan mempersiapkan server local yang sekaligus menjadi

tempat penyimpanan data aplikasi yang akan kita bangun.

1. Buat folder baru bernama www.konseling.com tanpa tanda kutip pada server local

(xampp/htdocs/www.konseling.com).

2. Selanjutnya buat 3 buah folder di dalam folder www.konseling,com seperti gambar

dibawah ini:

Gambar 12. Setting Folder Server Local

3. Download dan ekstrak file template Bootstrap kedalam folder Bootstrap pada folder www.konseling.com

4. Download dan ekstrak file template Diagram Highcarts kedalam folder Chart pada folder www.konseling.com

C. Mempersiapkan koneksi database dan main aplikasi

1. Membuat file koneksi.php

Buka text editor (sublime text) selajutnya ketikkan kode seperti dibawah ini:

Gambar 13. Membuat File Koneksi

Selanjutnya simpan file diatas dalam folder pembimbing, simpan dengan nama

koneksi.php ( www.konseling.com/pembimbing/koneksi.php).

http://www.konseling.com/

http://www.konseling,com/



http://www.konseling.com/pembimbing/koneksi.php


22

Penjelasan:

File koneksi digunakan untuk menghubungkan antara aplikasi dengan database mysql

yang telah dibuat sebelumnya.

a) Pada source code diatas terdapat 2 segmentasi code. Yang pertama adalah

“mysql_connect” berfungsi untuk membuka dan menghubungkan aplikasi ke server

local. Hal ini sama dengan kita mengetikkan url: localhost/phpmyadmin pada

browser dan menghubungkan aplikasi ke Database Management System

(phpmyadmin).

b) Yang kedua adalah “mysql_select_db” berfungsi untuk menghubungkan aplikasi

dengan database (memilih database). Hal ini sama saja ketika kita berada dihalaman

DBMS phpmyadmin dan memilih salah satu database yang ada disitu.

2. Membuat Main File (User dan Dosen) page.php

Buka text editor (sublime text) selajutnya ketikkan kode seperti dibawah ini:

Gambar 14. Membuat Main File Mahasiswa (page.php)

Selanjutnya simpan file diatas dalam folder www.konseling.com, simpan dengan nama

page.php ( www.konseling.com/page.php).

http://www.konseling.com/page.php


23

Gambar 15. Membuat Main File Dosen Segmen Periode (page.php)


24

Gambar 16. Membuat Main File Dosen Segmen Pengelolaan Mahasiswa (page.php)

Gambar 17. Membuat Main File Dosen Segmen

Progress (page.php)

Selanjutnya simpan file diatas dalam folder pembimbing, simpan dengan nama

page.php ( www.konseling.com/pembimbing/page.php).

Penjelasan:

Gambar 18. Nama Main File

Gambar 18. Alias dan Nama File Yang Diregister Pada Main File

Nama Alias Main File (Untuk pemanggilan file php)

A

B

C

http://www.konseling.com/pembimbing/page.php


25

**

A : Nama alias dari file php yang nanti akan dipanggil. Penamaan ini boleh diganti apa saja sesuai dengan kebutuhan.

B : Tanda pemisah dari pilihan alias satu dengan yang lainnya.

C : Nama file php asli dari nama alias yang dipanggil.

Logikanya; case nama alias (pilih nama alias) : Jika (file php yang dipilih tidak ada) maka

tampilkan pesan “Error.. File Not Found”; Selain itu (file ada), tampilkan file php; break;

Kedua main file diatas(main file mahasiswa dan main file dosen) digunakan untuk me

register file-file php (sisi mahasiswa/dosen)yang akan dibuat nanti. Masing masing file

terhubung satu sama lain dan membetuk serangkaian tindakan dengan fungsi masing

masing, misalnya:

a) tahun_i (yang berarti form penginputan untuk data periode bimbingan),

b) tahun_s (yang berfungsi menyimpan hasil inputan dari file tahun_i sebelumnya),

c) tahun (berfungsi menampilkan data hasil inputan dari database),

d) tahun_e (berfungsi sebagai fom edit data tahun),

e) tahun_u (berfungsi untuk mengupdate data hasil dari pengeditan dari form

tahun_e sebelumnya) dan

f) tahun_d (berfungsi untuk menghapus data tahun dari database).


26

PERTEMUAN 4

Perancangan Index User, Home Admin dan Menu

I. Index User

Tahap selanjutnya, setelah mempersiapkan local server, koneksi, main file selanjutnya

adalah merancang halaman index user/mahasiswa, dimana halaman ini akan di akses oleh

user/mahasiswa dalam mendapatkan informasi mengenai progress bimbingan konseling tugas

akhri.

Disini akan digunakan template yang telah di download sebelumnya berupa Bootstrap

template yang bersifat free, yang nanti akan digunakan dengan cara menghapus beberapa

bagian template dan merubah content yang dibutuhkan serta menyisipkan file-file php yang

akan digunakan. Berikut ini adalah tahapannya:

1. Direktori Site dari editor Adobe Dreamweaver CS.6

Buka file Bootstrap yang telah di ekstrak sebelumnya dari editor Adobe Dreamweaver

CS.6 menggunakan direktori site. Berikut ini tahapan pembuatan direktori site deperti

gambar dibawah ini:

Gambar 19. Halaman Awal Editor Adobe Dreamweaver CS.6


27

Ini merupaka tampilan awal dari editor Adobe Dreamweaver CS.6. Adobe dreamweaver

merupakan editor text (php/css/html) yang cukup banyak digunakan oleh beberapa

programmer pemula karena kemudahannya. Live preview cod dapat langsung terlihat

saat menggunakan view split (design and code), sehingga pemetaan coding dapat

langsung terlihat hasilnya.

Gambar 20. Setting Direktori Site

Untuk membuat direktori site, klik menu Site – New Site, Maka akan muncul halaman

seperti dibawah ini

Gambar 21. Setting Nama Site dan Folder Site


28

Selanjutnya tentukan site name dan local site folder tempat menyimpan file-file website

yang sedang dibuat. Selanjutnya simpan dengan mengkilk tombol Save. Maka aplikasi

akan me load file website dari folder yang dipilih dan menampilkan data site secara real

time sesuai dengan file yang ada pada folder server local.

Gambar 22. File Website Real Time

2. Index User/Mahasiswa

Buka folder Bootstrap, buka file blank.html yang ada pada folder

Bootstrap/pages/example/blank.html. Selanjutnya save as dengan nama index.php di

folder utama (www.konseling.com), jika ada pesan update link, klik yes. Untuk lebih

jelasnya lihat gambar dibawah ini:

Gambar 23. Template File blank.html



29

Gambar 24. Penyimpanan template index.php

Ubah beberapa menu tampilan awal menu index.php dan hilangkan beberapa tampilan

yang tidak diperlukan berikut ini tampilan menu dan kode program index.php

(user/mahasiswa)

Gambar 25. Desain Index Awal (index.php)


30

Gambar 26. Desain Index (index.php) Setelah Diubah

Gambar 27. Desain Menu pada Index User/Mahasiswa

Gambar 28. Hyperlink Desain Menu Data Bimbingan pada Index User/Mahasiswa


31

3. Home admin/dosen

Seperti yang telah dilakukan sebelumnya copy dan paste file blank.html yang ada pada

folder Bootstrap/pages/example/blank.html. Selanjutnya save as dengan nama

home.php di folder pembimbing ( www.konseling.com/pembimbing ), jika ada pesan

update link, klik yes. Untuk lebih jelasnya lihat gambar dibawah ini:

Gambar 29. Penyimpanan template home.php

Ubah beberapa menu tampilan awal menu index.php dan hilangkan beberapa tampilan

yang tidak diperlukan berikut ini tampilan menu dan kode program index.php

(user/mahasiswa)

http://www.konseling.com/pembimbing


32

Gambar 30. Desain Home (home.php) Setelah Diubah

Gambar 31. Desain Menu pada Home Admin/Dosen

Gambar 32. Hyperlink Desain Menu Data Bimbingan pada Home Admin/Dosen


33

PERTEMUAN 5

Perancangan Data Master Admin/Dosen,

View Progress Mahasiswa dan Login

Setelah mempersiapkan index dan home file, tahap selanjutnya adalah merancang

master data. Perancangan dan penamaan file master merujuk pada data main file yang telah

sebelumnya dirancang. Berikut langkahnya :

I. Data Master Periode (Admin/Dosen)

1. File tahun.php

Gambar 33 . View Design File tahun.php

Gambar 34. View Code File tahun.php


34

2. File tahun_i.php

Gambar 35. View Design File tahun_i.php

Gambar 36. View Code File tahun_i.php

3. File tahun_s.php

Gambar 37. View Code File tahun_s.php


35

4. File tahun_e.php

Gambar 38. View Design File tahun_e.php

Gambar 39. View Code File tahun_e.php

5. File tahun_u.php

Gambar 40. View Code File tahun_u.php


36

Gambar 41. View Code File tahun_d.php

II. Master Mahasiswa (Admin/Dosen)

1. File siswa.php


37

Gambar 42. View Code File siswa.php

Gambar 43. View Design File siswa.php

2. File siswa_i.php


38

Gambar 44. View Design File siswa_i.php

Gambar 45. View Code File siswa_i.php

3. File siswa_s.php

Gambar 46. View Code File siswa_s.php

4. File siswa_u.php

Gambar 47. View Code File siswa_u.php


39

5. File siswa_e.php

Gambar 48. View Design File siswa_e.php

Gambar 49. View Code File siswa_e.php

6. File siswa_d.php

Gambar 50. View Code File siswa_d.php


40

III. Master Progres (Admin/Dosen)

1. File progress.php

Gambar 51. View Code File progress.php


41

Gambar 52. View Design File progress.php

2. File progress_i.php

Gambar 53. View Design File progress _i.php


42

Gambar 54. View Code File progress _i.php

3. File progress _s.php

Gambar 55. View Code File progress _s.php

4. File progress _u.php

Gambar 56. View Code File progress _u.php


43

5. File progress _e.php

Gambar 57. View Design File progress _e.php

Gambar 58. View Code File progress _e.php


44

6. File progress _d.php

Gambar 59. View Code File progress _d.php

IV. Login (Admin/Dosen)

1. File index.php

Gambar 60. View Design File index.php


45

Gambar 61. View Code File index.php

2. File log_auth.php

Gambar 62. View Code File log_auth.php

V. Data View Mahasiswa (User/Mahasiswa)

1. File nama.php

Gambar 63. View Code File nama.php


46

Gambar 64. View Code File nama.php

IV. Data View Progres (User/Mahasiswa)



47

Gambar 65. View Code File progress.php


48

PERTEMUAN 7

Hasil Implementasi Aplikasi

I. View Data Mahasiswa

Gambar 66. View File nama.php

II. View Progres Bimbingan

Gambar 67. View File progress.php

III. Login Dosen


49

Gambar 68. View File index.php (dosen)

IV. Periode

1. File tahun.php

Gambar 69. View File tahun.php


50

2. File tahun_i.php

Gambar 70. View File tahun_i.php

3. File tahun_e.php

Gambar 71. View File tahun_e.php

V. Mahasiswa

1. File siswa.php

Gambar 72. View File siswa.php


51

2. File siswa_i.php

Gambar 73. View File siswa_i.php

3. File siswa_e.php

Gambar 74. View File siswa_e.php


52

VI. Progres Bimbingan


Gambar 75. View File progress.php

2. File progress_i.php

Gambar 76. View File progress_i.php


53

3. File progress_e.php

Gambar 77. View File progress_e.php


54

Daftar Referensi

[1]. https://id.wikipedia.org/wiki/Web_Programing [2]. Yuhefizah, S.Kom, Ir. HA Mooduto, Rahmat Hidayat, ST: 2009: Cara Mudah Membangun

Website Interaktif Menggunakan Conetnt Management System Joomla Edisi Revisi: PT Elex Media Komputindo, Jakarta

[3]. https://www.codepolitan.com/sejarah-dan-perkembangan-html5-belajar-html [4]. Wahana Komputer: 2010: Shourt Course Mendesain Website Dinamis dan Menarik

dengan Adobe Dream Weaver CS4: ANDI (CV Andi Offset): Yogyakarta. [5]. https://www.w3schools.com/css/default.asp [6]. Supono dan Virdiandry Putratama: 2016: Pemrograman Web Dengan MEnggunakan PHP

dan Frame Work Codeigniter: Deepublish Yogyakarta [7]. https://www.w3schools.com/php/default.asp [8]. https://www.techopedia.com/definition/23898/web-programming [9]. http://kursuswebprogramming.com/pengertian-web-programming/ [10]. Rosa : Rekayasa perangkat Lunak [11]. Abdul Kadir: 2009: From Zero to A Pro: Membuat aplikasi web dengan PHP dan Database

MySQL: Andi: Yogyakarta. [12]. https://www.codepolitan.com/mengenal-mariadb [13]. http://www.duniailkom.com/pengertian-dan-jenis-jenis-operator-aritmatika-dalam-php/ [14]. https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

https://id.wikipedia.org/wiki/Web_Programing

https://www.codepolitan.com/sejarah-dan-perkembangan-html5-belajar-html

https://www.w3schools.com/css/default.asp


https://www.techopedia.com/definition/23898/web-programming

http://kursuswebprogramming.com/pengertian-web-programming/

https://www.codepolitan.com/mengenal-mariadb

http://www.duniailkom.com/pengertian-dan-jenis-jenis-operator-aritmatika-dalam-php/

modul web programming i d - yosephta.files.wordpress.com … · modul web programming i d.iii 2...

Documents