KATA PENGANTAR

Puji syukur kehadirat Tuhan yang Maha Esa yang telah memberikan rahmat
dan hidayahnya kepada kami sehingga dapat terselesaikannya laporan pembuatan
web ini dengan baik .
Adapun maksud dan tujuan dari penyusunan laporan ini adalah untuk
memberikan laporan pembuatan web chatting secara langsung dan terinci mengenai
seluruh hasil yang berkaitan dengan pembuatan web chatting yang dimaksud untuk
mempermudah komunikasi antar siswa siswi maupun guru Hosana.
Atas terselesaikannya pembuatan web chatting dan pembuatan laporan web,
kami mengucapkan terima kasih kepada pihak yang membantu.Kami menyadari
laporan ini masih jauh dari kesempurnaan.Untuk itu kami mengharapkan kritik dan
saran yang sifatnya membangun.

Tebas, 25 Mei 2107

Penyusun

1
 DAFTAR ISI
Kata Pengantar........... 1

Daftar Isi.................... 2

Bab.I Pendahulu 3

1.1 Latar Belakang 3

1.2 Tujuan . 3

1.3 Ruang Lingkup Permasalahan ................. 3

1.4 Pembatasan Masalah ................ 3

Bab II Isi . 4

2.1 Landasan Teori ............................................................................ 4

2.1.1 Pengertian PHP .. 4

2.1.3 Pengertian Ajax .. 4

Bab III Hasil ... 5

3.1 Semua Yang Berhubungan dengan web .......................................... 5

Bab IV Penutup .. 9

4.1 Kesimpulan. ................................................................................. 9

4.2 Saran ........................................................................................... 9

2
 BAB I

PENDAHULUAN

1.1 LATAR BELAKANG

Latar belakang pembuatan laporan web Chatting ini adalah untuk

mempermudah komunikasi antar siswa siswi maupun guru Smks Hosana
Tebas.Membuat web Chatting ini tidak mudah karena sangat memerlukan
ketelitian dan pengetahuan tentang cara pembuatan web untuk mendapat hasil yang
maksimal.Untuk membuat web Chatting ini di perlukan suatu langkah-langkah
persiapan secara umum yaitu merumuskan tujuan web chatting,menentukan isi web
chatting,menentukan target,menentukan struktur web chatting,jika langkah tersebut
bisa kita pelajari,maka kita akan bisa membuat suatu web chatting yang
menarik.Membuat web chatting juga merupakan suatu syarat untuk mendapatkan
nilai dari sekolah.

1.2 Tujuan

Tujuan pembuatan web chatting ini adalah untuk mempermudah komunikasi

antar siswa siswi maupun guru di Smks Hosana Tebas.

1.3 Ruang Lingkup Permasalahan

Ruang lingkup penulisan ini dibatasi pada tahapan dalam pembuatan website
chatting . Baik itu pembuatan database myqsl , php , ajax dan sebagainya

1.4 Pembatasan Masalah

Masalah yang dibahas pada Tugas Akhir ini adalah pembuatan Web Chatting
untuk mempermudah komunikasi ataupun saling bertukar informasi dengan
menggunakan bahasa PHP , MySQl , dan Ajax

3
 BAB II

ISI

2.1 Landasan Teori

Web chatting merupakan suatu aplikasi yang kami ciptakan untuk mempermudah
komunikasi antar siswa siswi maupun guru di Smks Hosana Tebas,sehingga lebih
mudah untuk berbagi informasi yang berkaitan dengan Smks Hosana Tebas.Web
chatting ini kami rangkai sedemikian rupa untuk mempererat komunikasi antar siswa
maupun guru di Smks Hosana Tebas.

2.1.1 Pengertian PHP

PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan

atau disisipkan ke dalam HTML.PHP banyak dipakai untuk memprogram
situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs
personal).

2.1.2 Pengertian Mysql

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL
(bahasa Inggris: database management system) atau DBMS yang multithread,
multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB
membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi
GNU General Public License (GPL), tetapi mereka juga menjual dibawah
lisensi komersial untuk kasus-kasus di mana penggunaannya tidak cocok
dengan penggunaan GPL.

2.1.3 Pengertian Ajax

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu

teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.
Tujuannya adalah untuk memindahkan sebagian besar interaksi pada
komputer web surfer, melakukan pertukaran data dengan server di belakang
layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan

4
 BAB III

Hasil

3.1 Semua yang berhubungan dengan Web

Semua yang berhubungan dengan Web akan dibagi dalam tahapan-tahapan
sebagai berikut
A. Desain Tampilan
B. Pembuatan Database Myql
C. Menghubungkan dengan Ajax

A. Desain Tampilan
Pembuatan form login kami menggunakan plugin Bootstrap 2.3.2 agar
membuat tampilan yang responsive

Kami juga menggunakan jquery untuk membuat tampilan pesan alert login
terlihat lebih bagus

5
 Berikut script pembuatan tampilan index.php
<?php
session_start();
error_reporting(E_ALL);
include "koneksi.php";
if(empty($_SESSION['nick']))
{
if(isset($_COOKIE['nick']))
{
$_SESSION['nick']=$_COOKIE['nick'];
header("location:".$_SERVER['PHP_SELF']);
}
else
{
belum_login();
}
}
else
{
sudah_login();
}
function belum_login(){
?>
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<head>
<title> Welcome </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="style_sebelum.css" rel="stylesheet">
<script src="bootstrap/js/jQuery.js"></script>
<script src="ajaxku.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<!-- CONTAINER -->
<div class="container">
<div class="row">
<div class="span4 offset4">
<h1 class="text-center text-info"> Hosana Chat </h1>
<p class="text-info text-center">Selamat Datang di Hosana Chat </br>
</div>
</div>
<div class="row">
<div class="span4 offset4">
<img src="chat-icon.png" class="img-circle">
</div>
</div>
</br>
<div class="row">
<div class="span4 offset4">
<button href="#modalmasuk" class="btn btn-primary btn-block btn-large" data-
toggle="modal" type="button"><i class="icon-share-alt icon-white"></i> Login</button>
<button href="#modaldaftar" class="btn btn-primary btn-large btn-block" data-
toggle="modal" type="button"><i class="icon-user icon-white"></i> Sign up</button>
<p class="text-center text-danger" > Copyright 2017 Bakwan Team </p>
</div>
</div>
<!-- MODAL -->
<div id="modalmasuk" class="modal hide fade">
<div class="modal-header">
<h3> Login </h3>

</div>
<div class="modal-body">
<!-- modal form login -->
<form class="form-horizontal" id="formmasuk" method="post" action="">
<div class="control-group">
<label class="control-label"
for="inputEmail">Username</label>
<div class="controls">
<input type="text" id="nick" placeholder="Nickname"

6
 B. Pembuatan Database Mysql
Kami membuat database dengan tiga kolom : online , pesan , user
Kolom online berisi data siapa saja yang sedang online , pesan berisi data-data pesan
yang akan dikirim user ke database , yang terakhir user yang berisi data akun tiap
user yang sudah melakukan registrasi

7
 C. Menghubungkan dengan Ajax
Ajax di web chatting ini sangat diperlukan karna , kami menggunakan Ajax
untuk menghubungkan database dengan PHP .
$(document).ready(function()
{
// ajax login
$("#formmasuk").submit(function()
{
var unick=$.trim($("#nick").val());
var upass=$.trim($("#pass").val());
if($("#cokie").is(':checked'))
{
var cokie=$("#cokie").val();
}
$.ajax({
url : 'login.php',
data : 'nick='+unick+'&pass='+upass+'&cokie='+cokie,
type : 'POST',
success : function(hasil){
if(hasil=="ok")
{
document.location="index.php";
}
else
{
$("#masuk").html('Masuk');
$("#notif").html('<div class="alert alert-error"><button type="button" class="close" data-
dismiss="alert">&times;</button>Nickname atau Password Salah ! </div>');
return false;
}
},
});
return false;
});

//ajax daftar
$("#formdaftar").submit(function()
{
var unick=$("#dnick").val();
var uemail=$("#email").val();
var upass=$("#dpass").val();
$.ajax({
url : 'daftar.php',
data : 'nick='+unick+'&email='+uemail+'&pass='+upass,
type : 'POST',
success : function(hasil){
if(hasil=="ada")
{
$("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-
dismiss="alert">&times;</button> Anda sudah terdaftar ! </div>');
return false;
}
else if(hasil=="yes")
{
$("#dnotif").html('<div class="alert alert-success"><button type="button" class="close" data-
dismiss="alert">&times;</button>Pendaftaran Berhasil, Tunggu Sebentar ! <img src="alihkan.gif"></div>');
function alihkan()
{
document.location="index.php";
}
setTimeout(alihkan,5000);
}
else
{
$("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-
dismiss="alert">&times;</button> Gagal Mendaftar ! </div>');
return false;
}

8
 BAB IV
PENUTUP
1.1 KESIMPULAN

Berdasarkan dari hasil web yang kami ciptakan,dapat disimpulkan sebagai

berikut:

Web chatting berguna untuk mempermudah komunikasi antar siswa

maupun guru di Hosana Tebas,maupun untuk berbagi informasi.

Dengan di ciptakannya web chatting ini selain mempererat

komunikasi,juga agar seluruh siswa mengetahui informasi penting
yang berkaitan dengan Hosana.

Dengan web Chatting,guru tidak perlu memberikan pengumuman

harus dengan memasang di papan pengumuman atau harus masuk
kelas satu per satu dan mengatakan pengumuman secara berulang-
ulang,tapi cukup menuliskannya di web chatting Hosana.

4.2 SARAN

Pada siswa maupun guru Smks Hosana harus memiliki akun untuk
dapat menggunakan web chatting.

Sering-seringlah membuka web chatting Hosana untuk mengetahui

informasi yang berkaitan dengan sekolah.

Untuk pengguna web chatting yang sudah memiliki akun,harus

mengingat kata sandi akunnya.