Visualisasi Graph Online Menggunakan PHP dan Dracula

Visualisasi graph online menggunakan php dan dracula merupakan sebuah program untuk menggambar graph. Pada kesempatan kali ini aku akan berbagi bagaimana cara membuat program tersebut. Dracula merupakan javascript yang berfungsi untuk membuat tampilan graph. Pada web-nya disebutkan bahwa dracula hanya terdiri javascript biasa dan SVG. Namun, menurutku ini luar biasa. hehe. Untuk mempelajari dracula lebih lanjut teman-teman bisa klik di sini. Dan untuk melihat demo bisa klik tombol berikut ini:

DEMO GRAPH ONLINE

Tampilan Program Visualisasi graph online menggunakan php dan dracula

Cara kerja program visualisasi graph online menggunakan php adalah sebagai berikut. Pertama, program akan menanyakan berapa jumlah titik pada graph. Misal kita ambil contoh jumlah titiknya ada 5. Berikut ini gambarnya:

Tampilan Awal Program Visualisasi Graph Online menggunakan PHP dan Dracula

Tampilan Awal Program Visualisasi Graph Online menggunakan PHP dan Dracula

Kemudian program akan menyuruh kita mengisi nama-nama titiknya. Untuk nama titik, pengguna bisa menggunakan huruf, angka, ataupun frasa. Misal kita isi nama-nama titik tersebut dengan menggunakan nama kota, yaitu: Jakarta, Bandung, Surabaya, Malang, Yogyakarta. Sehingga tampilannya menjadi seperti ini:

Tampilan untuk mengisi titik

Tampilan untuk mengisi titik

Jika nama-nama titik sudah diisi, pengguna akan diminta untuk menentukan keterhubungan pada sebuah matrik graph. Graph pada program ini merupakan graph sederhana tidak berarah dan tidak mengandung loop. Sehingga pengguna hanya perlu mengisi keterhubugan pada satu sisi saja. Misal bobot Jakarta-Bandung akan sama dengan Bandung-Jakarta. Untuk menghemat waktu, pengguna tidak perlu mengisi keduanya. Hanya salah satu saja. Berikut contoh isiannya.

Mengisi Matrik

Mengisi Matrik

Jika sudah diisi maka pengguna langkah terakhir adalah klik Lihat Hasil. Maka akan muncul visualisasi graph seperti berikut ini:

Hasil Visualisasi Graph Online menggunakan PHP dan Dracula

Hasil Visualisasi Graph Online menggunakan PHP dan Dracula

Cara Mebuat Program Visualisasi Graph Online Menggunakan PHP dan Dracula

Yang pertama harus kita lakukan adalah membuat sebuah form untuk menentukan berapa jumlah titik yang adalah pada graph. Berikut ini adalah source codenya.

Form tersebut, kemudian diarahkah ke halaman nodeName.php yang juga merupakan form yang meminta pengguna mengisikan nama-nama titiknya. Berikut ini adalah source codenya.

Form dari nodeName.php kemudian diarahkan lagi ke matrik dengan nama file matrikGraph.php. Berikut ini source code dari matrikGraph.php

Langkah terakhir adalah membuat halaman yang akan menampilkan hasil visualisasi graph online dengan php dan dracula, kita beri nama halaman tersebut dengan draw.php. Pada halaman tersebut kita harus memasukkan file javascript dracula. Berikut ini source codenya.

Kesimpulan dan Penutup

Demikian program untuk membuat graph online dengan php dan dracula. Kita memang belum sampai pada pemrosesannya. Lain kesempatan aku akan mencoba untuk memberikan algoritma terhadap program. Selamat belajar. Semoga bermanfaat. Terima kasih sudah membaca.