Tutorial Membuat Fitur Chat Menggunakan Codeigniter & jQuery – Inwepo
Tutorial Pemrograman

Tutorial Membuat Fitur Chat Menggunakan Codeigniter & jQuery

Chatting merupakan suatu feature atau suatu program di Internet untuk berkomunikasi langsung sesama pengguna internet yang sedang online atau yang sedang sama-sama menggunakan Internet. Komunikasi ini dapat berupa teks (text chat) ataupun suara (voice chat).

Pada artikel kali ini penulis akan mengajak pembaca untuk mencoba membuat fitur chatting di website menggunakan framework Codeigniter dengan tambahan jQuery.

CARA MEMBUAT FITUR CHAT ONLINE MENGGUNAKAN CODEIGNITER + JQUERY

Simak ulasan penulis berikut ini:

1. Buat database dengan nama ci_chat.

2. Buat table ci_chat dengan potongan kodingan seperti berikut:

Struktur dari database ci_chat akan terlihat seperti gambar dibawah ini:

database ci_chat

Di dalam table tersebut terdapat 2 table yaitu: chat dan users. Dimana pada table chat memiliki primary key dengan field chat_id, sedangkan pada table chat memiliki primary key pada field id. Kedua table tersebut saling terintegrasi yang didefiniskan melalui foreign key dengan field send_by pada table chat.

2. Langkah selanjutnya adalah membuat controller dengan nama Welcome.php. Controller ini berisi untuk  membuat halaman login dan logout. Kemudian tambahkan potongan program berikut:

3. Selanjutnya membuat tampilan dari website chatting online dengan membuat nama file login.php di dalam folder view. Potongan kodingan dibawah ini berfungsi untuk membuat tampilan halaman login.

4. Kini saatnya untuk mempercantik tampilan chat online dengan membuat file CSS dibubuhkan dengan jQuery untuk memperkuat kesan nyata tampilannya. Buatlah file dengan nama style.css di dalam folder assets.

5. Pada file css diatas, sudah berisi dari style untuk widget chat. Selanjutnya buat buat controller baru dengan nama Chat.php dan isi seperti berikut.

6. Pada controller Chat inilah kita bisa mengirim dan menerima pesan, selanjutnya buat view dengan nama chat_dashboard.php

Pembuatan file telah selesai dan penulis tidak menggunakan model pada contoh kali ini karena isinya sangat sederhana.  Sedikit penjelasan, pada chat ini saya membuat 2 template untuk widget dan untuk isi chat, teman-teman dapat melihatnya pada chat_dashboard, dengan template ini kita bisa menambahkan widget dengan cepat tanpa harus membuat manual dengan javascript. Widget ini juga saya batasi hanya dapat menampung 10 chat saja.

Tampilan Halaman Login:

tampilan login chat online

Untuk bisa masuk ke halaman chatting online, Anda bisa memasukan username dan password sesuai dengan demo diatas. Jika berhasil, maka akan muncul halaman dashboard chat seperti ini:

halaman dashboard chat online

Pilih teman untuk diajak chatting dengan meng-klik nama teman Anda, kemudian akan muncul kotak dialog untuk memulai percakapan seperti gambar dibawah ini:

kotak dialog percakapan pesan Nah, itu tadi pembuatan fitur chat online menggunakan framework Codeigniter. Pembuatan aplikasi ini sangat sederhana karena tidak menggunakan model serta maksimal pesan yang bisa dikirim hanya sampai 10 kali saja.

Penulis juga akan membagikan source code dan live demo program diakhir artikel ini. Jika pembaca mempunyai ketertarikan dalam pembuatan website atau apapun, bisa tinggalkan pesan di kolom komentar. Selamat mencoba ya!

Demo Live

Source Code Program



Hello, I’m a UI/UX Designer & Front End Developer from Jakarta, Indonesia. I hold a Bachelor of Informatics Engineering from Gunadarma University.



2 Comments

2 Comments

  1. theBhotax

    at

    sangat membantu terimakasih …….!

  2. Yobel

    at

    keren gan

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Tutorials

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar, dan video

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di indonesia untuk menyelesaikan masalahnya. Ayo berbagi tutorial terbaikmu

Download


Copyright © 2017 Inwepo. Server by GoCloud

To Top