Make your dream to be programer is happen

Tampilkan postingan dengan label PHP. Tampilkan semua postingan
Tampilkan postingan dengan label PHP. Tampilkan semua postingan

Cara Menyimpan Data Dynamic Form Field Dalam Database

Cara Menyimpan Data Dynamic Form Field Dalam Database

Cara Menyimpan Data Dynamic Form Field Dalam Database - Jika sebelumnya kita sudah membuat Dynamic Form Field kali ini kita akan belajar cara menyimpan data dari dynamic form filed ke dalam Database MySql dengan menggunakan PHP. Secara teknis dalam proses insert ke dalam database tidak ada yang berbeda, akan tetapi data yang di kirimkan dari form adalah berupa array jadi pertama kita perlu memecahnya dengan menggunakan perulangan kemudian menyimpannya per-data. Untuk lebih jelasnya langsung saja kita ke prakteknya.

Apabila anda belum membuat Dynamic Form Filednya baca di sini untuk cara membuatnya : Cara Membuat Dynamic Form Field Keren Dengan Bootstrap

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Pertama pindahkan terlebih dahulu folder Dynamic_field ke dalam webserver anda. karena kita menggunakan database dan PHP jadi kita memerlukan webserver.

Database

Pertama buat sebuah database dengan nama db_anime dan buatlah sebuah tabel di dalamnya dengan nama tbl_karakter dengan struktur :

Name
Type
Size
Extra
Primary
id
INT
100
auto_increment
yes
nama_char
VARCHAR
50



HTML

Ubah sedikit file index.html anda dengan menambahkan sebuah tombol submit dan memberikan tujuan action form  ke save_data.php sehingga script anda menjadi sekarang seperti di bawah :

<!doctype html>
<html lang="en">
<head>
<title>Menyimpan Data Dynamic Field Dengan PHP | Jin Toples Programming</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
*{
margin: 0;
padding: 0;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.entry{
margin-bottom:10px;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#645348;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
.form-control{
border-radius:0px;
}

.btn {
border-radius:0px;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<h1>Jin Toples Programming</h1>
<h1>Menyimpan Data Dynamic Field Dengan PHP</h1>
<form action="save_data.php" method="post">
<div class="controls">
<div class="form-group">
<div class="entry input-group">
<input class="form-control" name="data[]" type="text" placeholder="Entry..." required>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
<button class="btn btn-success" type="submit">Submit</button>
</form>
</div>
</body>
</html>

PHP

Buat sebuah file PHP baru dalam folder Dynamic_field dengan nama save_data.php dengan isi script :

<?php
//connect ke database
mysql_connect("localhost","root","");
mysql_select_db("db_anime");

//menankap data inputan field dari form
$data = $_POST['data'];

//perulangan untuk mengekstrak array dari lemparan isi field form
foreach($data as $row){
//menyimpan data ke dalam tablel tbl_karakter
mysql_query('INSERT INTO tbl_karakter (nama_char) VALUES ("'.$row.'") ');
}

//pesan alert tersimpan dan redirect kembali
echo "<script>
alert('data berhasil tersimpan');
window.location.href='index.html';
</script>";
?>

Penjelasannya anda dapat baca sendiri di atas.

Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda, dengan mengetikan url :

http://localhost/dynamic_field

kemudian cobalah tambah beberapa field dan isi data kemudian submit, apakah data tersimpan dalam database ?

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Menyimpan Data Dynamic Form Field Dalam Database anda sekarang sudah selesai, baca juga tutorial program PHP lainnya.
Share:

Cara Membuat Sistem Login Keren Dengan PHP

Cara Membuat Sistem Login Keren Dengan PHP

Cara Membuat Sistem Login Keren Dengan PHP - Kali ini kita akan membuat sitem login dengan session yang di sertai dengan fitur logout menggunakan PHP. Sistem login digunakan untuk otentikasi user masuk ke dalam suatu sistem dengan mengirimkan data seperti username atau password yang nantinya di cocokan dengan data yang ada dalam database. Lebih jelasnya langsung ke prakteknya memebuat sistem login dengan PHP.



Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Database

Pertama buatlah sebuah database terlebih dahulu dengan nama db_login kemudian buatlah sebuah table di dalamnya dengan nama tbl_login dengan struktur :

NameTypeSizeExtraPrimary
idINT100auto_incrementyes
usernameVARCHAR50

passwordVARCHAR100


Masukan sebuah data untuk kita login :

username : admin
password : admin ( enkripsi password dengan MD5 agar lebih aman )

insert user ke tabel

PHP

Pertama buatlah sebuah folder dengan nama login_keren di dalam webserver anda

login.php

Untuk form loginnya buatlah sebuah file PHP baru dengan nama login.php di dalam folder login_keren dengan isi script :

<!DOCTYPE html>
<head>
<title>Login Form | Jin Toples Programming</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
//ini digunakan untuk mengecek apakah session login username ada
session_start();
if (!empty($_SESSION['username'])) {
//jika ada redirect ke halaman index
header('location:index.php');
}
?>
<div class="login"> <!-- Login -->
<h1>Login to your account</h1>

<form class="form" action="cek_login.php" method="post" action="">
<?php
//kode php ini kita gunakan untuk menampilkan pesan eror
if (!empty($_GET['error'])) {
if ($_GET['error'] == 1) {
echo '<h3 class="error">Username dan Password belum diisi!</h3>';
} else if ($_GET['error'] == 2) {
echo '<h3 class="error">Username belum diisi!</h3>';
} else if ($_GET['error'] == 3) {
echo '<h3 class="error">Password belum diisi!</h3>';
} else if ($_GET['error'] == 4) {
echo '<h3 class="error">Username dan Password tidak terdaftar!</h3>';
}
}
?>
<p class="field">
<input type="text" name="username" placeholder="Username or email" required/>
</p>

<p class="field">
<input type="password" name="password" placeholder="Password" required/>
</p>

<p class="submit"><input class="btn" type="submit" name="commit" value="Login"></p>
</form>
</div> <!--/ Login-->
</body>
</html>

config.php

Untuk koneksi ke database buatlah sebuah file baru dengan nama config.php di dalam folder yang sama.

<?php
//digunakan untuk koneksi ke database
mysql_connect("localhost","root","");
mysql_select_db("db_login");
?>

cek_login.php

Untuk otentikasi data yang di kirimkan dari form login buatlah sebuah file baru dengan nama cek_login.php di dalam folder yang sama.

<?php
//memanggil file koneksi database
include('config.php');

//tangkap data dari form login
$username = $_POST['username'];
$password = $_POST['password'];

//untuk mencegah sql injection
//kita gunakan mysql_real_escape_string
$username = mysql_real_escape_string($username);
$password = MD5(mysql_real_escape_string($password));

//cek data yang dikirim, apakah kosong atau tidak
if (empty($username) && empty($password)) {
//kalau username dan password kosong
header('location:login.php?error=1');
break;
} else if (empty($username)) {
//kalau username saja yang kosong
header('location:login.php?error=2');
break;
} else if (empty($password)) {
//kalau password saja yang kosong
//redirect ke halaman index
header('location:login.php?error=3');
break;
}

//mencari data dengan username dan password yang sama di dalam tabel tbl_user
$q = mysql_query("select * from tbl_user where username='$username' and password='$password'");

//mengecek apakah hasil pencarian data di atas ada
if (mysql_num_rows($q) == 1) {
session_start();
//kalau username dan password sudah terdaftar di database
//buat session dengan nama username dengan isi nama user yang login
$_SESSION['username'] = $username;

//redirect ke halaman index
header('location:index.php');
} else {
//kalau username ataupun password tidak terdaftar di database
header('location:login.php?error=4');
}
?>

cek_session.php

Sekarang untuk mengecek apakah session login username ada atau tidak buatlah sebuah file baru dengan nama cek_session.php di dalam folder yang sama.

<?php 
session_start();
//mengecek apakah session username kosong atau tidak
if (!isset($_SESSION['username']) || empty($_SESSION['username'])) {
//jika kosong redirect ke halaman login
header('location:login.php');
}
?>

index.php

Untuk halaman yang muncul ketika berhasil login buatlah sebuah file baru dengan nama index.php di dalam folder yang sama

<!DOCTYPE html>
<head>
<title>Login Form | Jin Toples Programming</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
//memanggil file cek_session.php
include('cek_session.php');
?>
<div class="login"> <!-- Login -->
<h1>Login Success</h1>
<form class="form" method="post" action="">
<h3 class="sukses">Login Berhasil</h3>
<p class="submit"><a href="logout.php"><input class="btn" type="button" name="commit" value="Logout"></a></p>
</form>
</div> <!--/ Login-->
</body>
</html>

 

Logout.php

Terakhir untuk menghapus semua session yang ada atau logout buat sebuah file baru dengan nama logout.php di dalam folder yang sama.

<?php
//lanjutkan session yang sudah dibuat sebelumnya
session_start();

//hapus session yang sudah dibuat
session_destroy();

//redirect ke halaman login
header('location:login.php');
?>

Css

Terakhir untuk mempercanti tampilann form anda agar lebih keren buat sebuah folder baru dengan nama CSS di dalam folder login_keren kemudian buatlah sebuah file CSS di dalamnya dengan nama style.css

body {
font: 13px/20px "Open Sans", Tahoma, Verdana, sans-serif;
color: #a7a599;
background: #31302b;
}

/* === Form === */
.form {
width: 100%;
}

.form .field {
text-align: center;
}

.form .field i {
font-size: 14px;
left: 0px;
top: 0px;
position: absolute;
height: 44px;
width: 44px;
color: #f7f3eb;
background: #676056;
text-align: center;
line-height: 44px;
transition: all 0.3s ease-out;
pointer-events: none;
}

/* === Login === */
.login {
position: relative;
margin: 150px auto;
width: 500px;
background: white;
border-radius: 3px;
}

.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}

.login h1 {
line-height: 55px;
font-size: 18px;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
color: #fff;
text-align: center;
background: #f2672e;

-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

.error {
text-align: center;
margin: 10px 0px;
font-size: 20px;
background: #f2dede;
color: #a94442;
padding: 20px 0px;
}

.sukses{
text-align: center;
margin: 10px 0px;
font-size: 20px;
background: #dff0d8;
color: #3c763d;
padding: 20px 0px;
}

.login p:first-child {
margin-top: 30px;
}

.login p.submit {
text-align: center;
}

/* === Input Form === */
::-webkit-input-placeholder {
color: #ded9cf;
font-family:'Open Sans';
}

:-moz-placeholder {
color: #ded9cf !important;
font-family:'Open Sans';
}

.form input[type=text],
.form input[type=password] {
font-family: 'Open Sans', Calibri, Arial, sans-serif;
font-size: 18px;
font-weight: 400;
padding: 20px 15px 20px 15px;
position: relative;
width: 72%;
height: 24px;
color: #676056;
border: none;
background: #f7f3eb;
color: #777;
transition: color 0.3s ease-out;
}

.form input[type=text] {
margin-bottom: 15px;
}

.form input[type=text]:hover ~ i,
.form input[type=password]:hover ~ i {
color: #ded9cf;
}

.form input[type=text]:focus ~ i,
.form input[type=password]:focus ~ i {
color: #f2672e;
}

.form input[type=text]:focus,
.form input[type=password]:focus,
.btn {
outline: none;
}

.btn {
margin-top: 15px;
width: 80%;
text-align: center;
font-size: 14px;
font-family: 'Open Sans',sans-serif;
font-weight: bold;
padding: 18px 0;
letter-spacing: 0;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
background-color: #f2672e;
text-shadow: none;
text-transform: uppercase;
border: none;
cursor: pointer;
position: relative;
margin-bottom: 20px;
-webkit-animation: shadowFadeOut 0.4s;
-moz-animation: shadowFadeOut 0.4s;
}

.btn:hover,.btn:focus{
color: #fff;
-webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-webkit-animation: shadowFade 0.4s;
-moz-animation: shadowFade 0.4s;
}

@keyframes shadowFade {
0% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}

@keyframes shadowFadeOut {
0% {
-webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}

@-webkit-keyframes shadowFade {
0% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}

@-webkit-keyframes shadowFadeOut {
0% {
-webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}

@-moz-keyframes shadowFade {
0% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}

@-moz-keyframes shadowFadeOut {
0% {
-webkit-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 54px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}

Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda, dengan mengetikan url :

http://localhost/login_keren

Cobalah anda login dengan menggunakan username : admin password : admin.

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Sistem Login Keren Dengan PHP anda sekarang sudah selesai, baca juga tutorial program PHP lainnya.
Share:

Cara Membuat Contact Form Website Keren Dengan PHP

Cara Membuat Contact Form Website Keren Dengan PHP
Cara Membuat Contact Form Website Keren Dengan PHP - Sebelumnya kita sudah membuat tampilan contact formnya, kali ini kita akan membuat data yang di kirim dari contact form dapat di simpan di dalam database dengan menggunakan PHP. lebih jelasnya langsung saja kita ke prakteknya sekarang.

Jika anda belum membuat contact formnya baca di sini : Cara Membuat Contact Form Keren Dengan HTML5

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Database

Pertama buatlah sebuah database terlebih dahulu dengan nama db_blog kemudian buatlah sebuah table di dalamnya dengan nama tbl_contact dengan struktur :

NameTypeSizeExtraPrimary
idINT100auto_incrementyes
namaVARCHAR50

emailVARCHAR30

phoneVARCHAR20

subjectVARCHAR200

messageTEXT



HTML

Ubah sedikit file index.html anda, tambahkan alamat action form dan nama dari masing - masing field di form sehingga script anda sekarang menjadi seperti ini :

<!doctype html>
<html>
<head>
<title>HTML5 Contact Form | Jin Toples Programming</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>

<header class="ccheader">
<h1>HTML5 Contact Form</h1>
</header>
<div class="wrapper">
<form method="post" action="save.php" class="ccform">
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-user fa-2x"></i></span>
<input class="ccformfield" name="nama" type="text" placeholder="Full Name" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-envelope fa-2x"></i></span>
<input class="ccformfield" name="email" type="email" placeholder="Email" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-mobile-phone fa-2x"></i></span>
<input class="ccformfield" name="phone" type="number" placeholder="Phone">
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-info fa-2x"></i></span>
<input class="ccformfield" name="subject" type="text" placeholder="Subject" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-comment fa-2x"></i></span>
<textarea class="ccformfield" name="message" rows="8" placeholder="Message" required></textarea>
</div>
<div class="ccfield-prepend">
<input class="ccbtn" type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>

Perhatikan baris kode di atas :

<form method="post" action="save.php" class="ccform">

save.php adalah alamat file PHP yang nantinya berfungsi untuk koneksi ke database dan menyimpan data contact form ke dalam table.

PHP

Sekarang terakhir untuk koneksi database dan menyimpan data ke dalam tabel buatlah sebuah file PHP baru dengan nama save.php di dalam folder Contact_Form anda dengan isi script :

<?php
//digunakan untuk koneksi ke database
mysql_connect("localhost","root","");
mysql_select_db("db_blog");

//menangkap inputan dari form
$nama = $_POST['nama'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$subject = $_POST['subject'];
$message = $_POST['message'];

//menyimpan data ke tabel
mysql_query('INSERT INTO tbl_contact (nama, email, phone, subject, message) VALUES ("'.$nama.'","'.$email.'","'.$phone.'","'.$subject.'","'.$message.'") ');

//pesan alert terkirim dan redirect kembali
echo "<script>
alert('Pesan Berhasil Di Kirim');
window.location.href='index.html';
</script>";
?>

Jangan lupa pindahkan folder Contact_Form anda ke dalam webserver anda jika anda belum meletakannya di dalam webserver.

Anda sekarang dapat mencobanya anda dengan cara membukanya di browser anda dengan mengetikan url :

http://localhost/contact_form/

Kita juga dapat menyertakan notifikasi ke email kita dengan menggunakan PHPMailer dengan mengirim email lewat gmail. Jika anda ingin mengetahui caranya cukup komen nanti kami akan membuatkan artikelnya.

Contact Form Website Keren Dengan PHP anda sudah selesai, baca juga tutorial PHP lainnya.
Share:

Cara Membuat Drag and Drop Upload Dengan jQuery Dropzone


Cara Membuat Drag and Drop Upload Dengan jQuery - Kali ini kita akan belajar membuat upload file Drag and Drop dengan jQuery, Drag and drop upload memungkinkan anda untuk mengupload file dengan cara mendrag sebuah file kemudian mendropnya di area yang telah disediakan. Dengan fitur ini mempercepat proses upload file yang berjumlah banyak, bahkan dengan fitur ini anda tidak perlu drag and drop satu persatu filenya anda dapat langsung menyeleksi file anda kemudian drop di area upload file.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Dropzone

Pertama buatlah sebuah folder dengan nama  drag_drop di dalam webserver anda.
Untuk mempermudah kita gunakan library khusus untuk upload Drag and drop yaitu Dropzone.js download dropzone file di sini : DOWNLOAD

Download juga style dropzpnenya di sini : DOWNLOAD ( Ctrl + S )

Simpan keduanya dalam folder drag_drop

Style

Sekarang untuk style tampilan halamannya buatlah sebuah file CSS baru dalam folder drag_drop dengan nama style.css dengan isi script :

<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:170%;
color:#fff;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
</style>

PHP

Sekarang untuk upload filenya buatlah sebuah file PHP baru dalam folder drag_drop dengan nama file-upload.php dengan isi script :

<?php
$upload_dir = 'uploads';
if (!empty($_FILES))
{
$tempFile = $_FILES['file']['tmp_name'];//this is temporary server location

// using DIRECTORY_SEPARATOR constant is a good practice, it makes your code portable.
$uploadPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $upload_dir . DIRECTORY_SEPARATOR;

// Adding timestamp with image's name so that files with same name can be uploaded easily.
$mainFile = $uploadPath.time().'-'. $_FILES['file']['name'];

move_uploaded_file($tempFile,$mainFile);
}
?>

HTML

Terakhir untuk markupnya buatlah sebuah file HTML di dalam folder drag_drop dengan nama index.html dengan isi script :

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Drag and Drop Upload Degan jQuery | Jin Toples Programming</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="dropzone.css">
<script src="dropzone.js"></script>

</head>
<body>
<h1>Jin Toples Programming</h1>
<h1>Drag and Drop Upload Degan jQuery</h1>
<div class="wrap">
<form action="file-upload.php" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<p class='copy'>Copyright &copy 
<a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>

Drag and Drop Upload Dengan jQuery Dropzone anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran. silahkan baca tutorial jQuery dan PHP lainnya.

Anda juga dapat mendownload file jadinya di sini : DOWNLOAD
Share:

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP - Kali ini kita akan belajar membuat Autocomplete field yang datanya berasal dari database ( MySQL ), data akan di ambil menggunakan bantuan jQuery dan PHP. Autocomplete adalah fitur yang berfungsi memberikan sugesti prediksi data dari inputan oleh user sehingga mempermudah dan mempercepat proses input. konsepnya adalah dengan cara mencocokan setiap karakter yang dimasukan oleh user dengan data yang telah ada atau disimpan di dalam database.


Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Database

Pertama buatlah sebuah database terlebih dahulu dengan nama db_anime kemudian buatlah sebuah table di dalamnya dengan nama tbl_anime dengan struktur :

NameTypeSizeExtraPrimary
idINT100auto_incrementyes
nama_animeVARCHAR50

Masukan beberapa data dummy sebagai contoh

Data dummy autocomplete

jQuery

Buatlah sebuah folder di dalam webserver anda dengan nama Autocomplete kemudian buatlah lagi sebuah folder dengan nama js

Downloadlah jQuery UI di situs resminya di sini : DOWNLOAD

Downloadlah jQuery di situs resminya di sini : DOWNLOAD

Kemudian exstrak keduanya di dalam folder js

PHP

Buatlah sebuah file PHP di dalam folder Autocomplete dengan nama data.php dengan isi script :


<?php
//connect ke database
mysql_connect("localhost","root","");
mysql_select_db("db_anime");
//harus selalu gunakan variabel term saat memakai autocomplete,
//jika variable term tidak bisa, gunakan variabel q
$term = trim(strip_tags($_GET['term']));

$qstring = "SELECT * FROM tbl_anime WHERE nama_anime LIKE '".$term."%'";
//query database untuk mengecek tabel anime
$result = mysql_query($qstring);

while ($row = mysql_fetch_array($result))
{
$row['value']=htmlentities(stripslashes($row['nama_anime']));
$row['id']=(int)$row['id'];
//buat array yang nantinya akan di konversi ke json
$row_set[] = $row;
}
//data hasil query yang dikirim kembali dalam format json
echo json_encode($row_set);
?>

File ini berfungsi untuk koneksi database kemudian file akan melakukan pencarian data dalam tabel dari inputan yang dimasukan oleh user kemudian dicocokan dengan field nama_anime jika bertemu yang cocok kemudian data di kembalikan dalam format json untuk di tampilkan sebagai sugesti autocomplete.

Buatlah sebuah file PHP baru di dalam folder Autocomplete dengan nama index.php dengan isi script :

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Autocomplete dari database dengan jQuery dan PHP | Jin Toples Programming</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="js/jquery-ui.css" />
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui.js"></script>

<script>
/*autocomplete muncul setelah user mengetikan minimal2 karakter */
$(function() {
$( "#anime" ).autocomplete({
source: "data.php",
minLength:2,
});
});
</script>
</head>
<body>
<div class="wrap">
<h1>Jin Toples Programming</h1>
<h1>Autocomplete dari database dengan jQuery dan PHP</h1>
<div class="ui-widget">
<label for="anime">Judul Anime : </label>
<input id="anime" />
</div>
<p class='copy'>Copyright &copy <a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>

CSS

Sekarang untuk style tampilannya buatlah sebuah file CSS di dalam folder Autocomplete dengan nama style.css dengan isi script :

<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:170%;
color:#645348;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
</style>

Autocomplete Dari Database Dengan jQuery dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran. silahkan baca tutorial jQuery dan PHP lainnya.

*Notes Jika sugesti tidak muncul
- Perhatikan baik - baik nama dari file JS nya di index.php pastikan file jQuery dan jQuery UI terload
- Perhatikan baik - baik nama field dan tabel anda yang ada di databse sudah sama dengan yang di data.php

Anda juga dapat mendownload file jadinya di sini : DOWNLOAD
Share:

Cara Membuat Upload Folder Dengan HTML5 dan PHP

Cara Membuat Upload Folder Dengan HTML5 dan PHP

Cara Membuat Upload Folder Dengan HTML5 dan PHP - Upload folder adalah proses upload semua isi file yang terdapat di dalam folder sekaligus dengan memanfaatkan fitur dari HTML5 yaitu Directory Upload. Directory upload ini memungkinkan kita untuk menggunakan direktori sebagai inputan di dalam form HTML yang akan di proses oleh PHP, dengan adanya fitur ini memudahkan kita dalam mengupload banyak file yang sudah kita letakan dalam sebuah direktori folder tanpa harus menguploadnya satu per satu.


Konsepnya adalah form input akan berisi data nama semua file yang ada di dalam folder ke bentuk array kemudian melemparkannya ke file PHP untuk di upload secara berulang menggunakan foreach.

Pertama buatlah sebuah folder di dalam webserver anda dengan nama directory_upload kemudian buatlah sebuah folder lagi di dalam folder lagi dengan nama upload ( folder upload ini nantinya akan digunakan sebagai direktori file yang berhasil di upload )

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

CSS 

Pertama untuk mempercantik tampilan buatlah sebuah file CSS dengan nama style.css di dalam folder directory_upload dengan isi script seperti berkut :

<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #333;
}
body {
text-align:center;
background-color:#61b3de;
font-family:Arial, Helvetica, sans-serif;
font-size:80%;
color:#666;
}
.wrap {
background: #f3f8fb;
width:730px;
margin:30px auto;
border: 4px dashed #61b3de;
border-radius:4px;
padding: 20px 5px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:170%;
color:#645348;
font-style:italic;
text-decoration:none;
font-weight:100;
padding: 10px;
}
.button {
border-radius: 10px;
background-color: #61b3de;
border: 0;
color: #fff;
font-weight: bold;
font-style: italic;
padding: 6px 15px 5px;
cursor: pointer;
}
input[type="file"]{
color: transparent;
}
input[type="submit"]:hover,:focus{
background-position:100px;
}
.msg{
background: #ddeff8;
padding: 5px;
margin-bottom: 15px;
border: #61b3de dotted 1px;
}
.copy{
margin-top: 20px;
clear: both;
}
</style>

HTML5 & PHP

Sekarang untuk file HTML5 dan PHP buatlah sebuah file PHP di dalam folder directory_upload dengan nama index.php dengan isi script :

<?php
/**
* Directory/Folder upload
* @author kiash
*/
$count = 0;
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
foreach ($_FILES['files']['name'] as $i => $name) {
if (strlen($_FILES['files']['name'][$i]) > 1) {
if (move_uploaded_file($_FILES['files']['tmp_name'][$i], 'upload/'.$name)) {
$count++;
}
}
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Directory Upload using webkidriectory</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<?php
if ($count > 0) {
echo "<p class='msg'>{$count} files uploaded</p>\n\n";
}
?>
<h1>Jin Toples Programming</h1>
<h1>Folder/Directory Upload using HTML and PHP</h1>
<form method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="files" multiple="" directory="" webkitdirectory="" mozdirectory="">
<input class="button" type="submit" value="Upload" />
</form>
<p class='copy'>Copyright &copy <a href="http://www.w3bees.com">W3BEES</a> 2013</p>
</div>
</body>
</html>

Upload Folder Dengan HTML5 dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

*notes
Terkadang untuk beberapa alasan tidak bekerja di browser Mozilla

Author : kiash
From : http://www.w3bees.com/2013/03/directory-upload-using-html-5-and-php.html
Modified by : Jin Toples

Anda dapat mengunduh file jadinya di sini : DOWNLOAD

Upload Folder Dengan HTML5 dan PHP sekarang sudah selesai, silahkan baca tutorial HTML5 dan PHP lainnya.
Share:

Cara Membuat Infinite Scroll Dengan jQuery dan PHP

Cara Membuat Infinite Scroll Dengan jQuery dan PHP

Cara Membuat Infinite Scroll Dengan jQuery dan PHP - Infinite Scroll adalah halaman tak berujung tanpa batas, meskipun anda tetap menscroll halaman tidak akan ada ujungnya sampai menyetuh batas terakhir konten atau hal ini biasa di sebut dengan autopagerize. Sebenarnya bukan halamannya lah yang tidak memiliki batas melainkan ketika kita mencapai bawah atau titik tertentu javascript di jquery akan langsung meload konten baru dan meletakannya di bawah konten terakhir, hal ini akan terus di lakukan hingga tidak ada lagi konten yang dapat di load.

Sebagai contoh jika anda pernah menggunakan facebook ( ya pasti pernah lahhh bkakakak ) di beranda jika anda menscroll ke bawah halaman akan terus meload status baru terus menerus tanpa ada batasnya. 

Lalu bagai manakah cara membuatnya ? langsung saja disini kita akan belajar Cara Membuat Infinite Scroll Dengan jQuery dan PHP

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

PHP

Kenapa pake PHP ? nah, sebenernya tanpa PHP pun kita bisa membuat infinite scroll tapi untuk memudahkan kalian nanti apabila ingin mengaplikasikannya langsung di website kalian jadi disini saya langsung menggunakan PHP. Yang namanya konten website nantinya kan harus dinamis jadi data yang di load nantinya akan berasal dari database jadi kita harus menggunakan PHP, tapi pada kali ini kita tidak akan menggunakan database tetapi hanya menggunakan PHP.

Buatlah sebuah folder baru di webserver anda ( karena disini kita menggunakan PHP jadi wajib mesti kudu harus ada webservernya ) buatlah folder dengan nama infinite_scroll kemudian buatlah sebuah file PHP baru dengan nama load_content.php dengan isi script seperti berikut :

<?php 
$id = $_GET['id'];
echo '<li>Content '.$id.'</li>';
?>

File ini yang nantinya akan di panggil oleh jQuery untuk konten selanjutnya apabila halaman di scroll. 

CSS

Agar terlihat lebih menarik kita buat sebuah file CSS baru di dalam folder yang sama dengan nama style.css masukan script berikut :

<style>
html { font-size: 100%; }
body {
font-size: 16px;
background: #0172c6;
color: #fff;
}

.wrapper {
max-width: 65%;
margin: auto;
}


h2 {
color: #fff;
padding: 0;
font-size: 1.5rem;
font-family: 'Open Sans', sans-serif;
display: block;
text-align: Center;
}

h1 {
color: #fff;
margin: 3rem 0 1rem 0;
padding: 0;
font-size: 1.5rem;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
display: block;
text-align: Center;
}
.items li{
list-style: none;
width: 100%;
background: #fff;
color: #0172c6;
text-align: center;
font-size: 40px;
margin-bottom :10px;
}
</style>

jQuery

Anda dapat mengunduh jQuery langsung dari situs resminya di sini : Download
Kemudian letakan di folder yang sama dengan sebelumnya.

HTML

Sekarang untuk markupnya buatlah sebuah file PHP baru dalam folder yang sama dengan nama index.php dengan isi script :

<!DOCTYPE html>
<html>
<head>
<title>Infinite Loop | Jin Toples Programming</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x=11;
function lastAddedLiveFunc()
{
$('div#lastPostsLoader').html('<img src="loading.gif"/>');
$.post("load_content.php?id="+x, function(data){
if (data != "") {
$(".items").append(data);
}
$('div#lastPostsLoader').empty();
x++;
});
};

//lastAddedLiveFunc();
$(window).scroll(function(){

var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.95;

if ((wintop/(docheight-winheight)) > scrolltrigger) {
lastAddedLiveFunc();
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<h1>Jin Toples Programming</h1>
<h2>Infinite Loop</h2>
<ul class="items">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
<li>Content 5</li>
<li>Content 6</li>
<li>Content 7</li>
<li>Content 8</li>
<li>Content 9</li>
<li>Content 10</li>
</ul>
<div id="lastPostsLoader"></div>
</body>
</html>

Perhatikan pada fungsi javascript di atas :
function lastAddedLiveFunc()
Fungsi ini digunakan untuk meload konten baru dari file load_content.php dan meletakan isi konten di bagian bawah dalam class items dengan menggunakan fungsi append

Perhatikan pada baris kode java script ini :

$(window).scroll(function(){

Hal ini javascript berfungsi untuk mendeteksi apakah sebuah halaman sedang di scroll atau tidak, kemudian perhatikan pada baris - baris di bawahnya ia akan mengecek apakah halaman melebihi 0.95 / 95% atau tidak jika melebihi maka jalankan fungsi lastAddedLifeFunc.

var  scrolltrigger = 0.95;

Pada baris kode di ataslah anda dapat mengatur sampai sejauh mana halaman di scroll baru konten baru akan di load, silahkan anda coba membesar atau mengecilkannya.

Sekarang Infinite Scroll Dengan jQuery dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD
Share:

Cara Membuat Model CRUD Efisien dan Efektif di Codeigniter

Cara Membuat Model CRUD Efisien dan Efektif di Codeigniter

Cara Membuat Model CRUD Efisien dan Efektif di Codeigniter - Model dalam codeigniter adalah sebuah class khusus yang kita buat untuk melakukan operasi  yang berhubungan dengan database atau biasa disebut dengan CRUD ( Create , Read , Update , Delete ). Dengan menggunakan active record class yang sudah ada dalam library codeigniter kita dapat dengan mudah melakukan query pada databse kita.

Akan tetapi masih banyak orang dalam membuat model untuk melakukan operasi CRUD membuat fungsi untuk melakukan CRUD pada setiap tabel yang ada dalam database menggunakan satu model setiap tabelnya, sebgai contoh : apa bila di dalam database terdapat dua buah tabel yaitu tbl_mahasiswa dan tbl_kelas orang seringkali membuat dua buah model yaitu model_mahasiswa dan model_kelas atau membuat satu model akan tetapi memisahkan fungsinya. dengan kata lain membuat fungsi untuk CRUD masing -  masing model.

Hal ini menurut saya agak tidak efisien dikarenakan memperlambat proses pembuatan sebuah aplikasi karena setiap kali kita ingin melakukan sebuah operasi CRUD terhadap suatu tabel dalam datbase kita lagi - lagi harus membuat sebuah fungsi baru atau membuat sebuah model baru. padahal di dalam codeigniter kita bisa melakukan passing variabel ke model yang kita buat.

Lalu bagaimanakah Cara Membuat Model CRUD Efisien dan Efektif Codeigniter ?

Untuk melakukan sebuah operasi CRUD sederhana terhadap sebuah tabel kita hanya perlu membutuhkan satu buah model. hal ini berlaku juga untuk banyak tabel kita hanya perlu membuat sebuah model.

Dari pada banyak cingcong manjang - manjangin artikel langsung aja kita meluncur ke contohnya sambil kita jelaskan cara kerja serta penggunaanya :

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Model

<?php

/**
* Description of global_models
*
* @author JIN TOPLES
*/

class global_model extends CI_Model {
function get_data($select, $table, $where){
$query = 'SELECT '.$select.' FROM '.$table.' '.$where;
return $this->db->query($query);
}

function save_data($data, $table){
$return = FALSE;
if ($this->db->insert($table, $data)){
$return = TRUE;
}

return $return;
}

function update_data($id, $field, $data, $table){
$return = FALSE;
$this->db->where($field, $id);
if ($this->db->update($table, $data)){
$return = TRUE;
}

return $return;
}

function delete_data($id, $field, $table){
$return = FALSE;
$this->db->where($field, $id);
if ($this->db->delete($table)){
$return = TRUE;
}

return $return;
}
}
?>
Perhatikan baik - baik model di atas model tersebut hanya terdiri dari empat buah fungsi yaitu : Get_data , Save_data , Update_data , Delete_data

Get_data : Fungsi ini digunakan untuk memanggil data atau mengambil list data dari tabel, fungsi ini juga dapat anda gunakan untuk pencarian data.
Save_data : Fungsi ini digunakan untuk menyimpan data
Update_data : Fungsi ini digunakan untuk mengupdate data
Delete_data : Fungsi ini digunakan untuk menghapus data 

Tetapi kenapa disana tidak terdapat nama tabel, field dan rules dari querynya ? hal ini dikarenakan kita melemparkan atau passing nama tabel, field dan rules dari querynya melalui controller langsung. Hah ? maksudnya ? Bagai mana cara menggunakannya ?

Untuk penggunaan sekarang kita langsung saja membuat sebuah controller, sebagai contoh kita akan melakukan sebuah operasi CRUD terhadap sebuah tabel yaitu tbl_mahasiswa

Controller

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class main extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->model('global_model');
}

function list_mahasiswa(){
//Parameter pertama adalah field yang ingin di ambil contoh : * atau id_mahasiswa, npm
//Parameter kedua adalah nama tabel
//Parameter ketiga adalah rulesnya contoh : WHERE id_mahasiswa=0

$this->global_model->get_data('*', 'tbl_mahasiswa', 'ORDER BY NPM ASC')->result();
}

function save_mahasiswa(){
$data['nama_mahasiswa'] = 'Jin Toples';
$data['NPM'] = '201110225xxx';

//Parameter pertama adalah data yang ingin di simpan
//Parameter kedua adalah nama tabel

$this->global_model->save_data($data, 'tbl_mahasiswa');
}

function delete_mahasiswa($id){
//Parameter pertama adalah id atau index yang ingin di cocokan dengan field
//Parameter kedua adalah nama field yang di cocokan dengan id
//Parameter ketiga adalah nama tabel

$this->global_model->delete_data($id, 'id_mahasiswa', 'tbl_mahasiswa');
}

function edit_mahasiswa($id){
//Parameter pertama adalah field yang ingin di ambil
//Parameter kedua adalah nama tabel
//Parameter ketiga adalah rulesnya contoh : WHERE id_mahasiswa=$id

$this->global_model->get_data('*', 'tbl_mahasiswa', 'WHERE id_mahasiswa="'.$id.'"')->result();
}

function update_mahasiswa($id){
$data['nama_mahasiswa'] = 'Jin Baru';
$data['NPM'] = '201110225xyz';

//Parameter pertama adalah id atau index yang ingin di cocokan dengan field
//Parameter kedua adalah nama field yang di cocokan dengan id
//Parameter ketiga adalah nama data yang akan di update
//Parameter keempat adalah nama tabel

$this->global_model->update_data($id, 'id_mahasiswa', $data, 'tbl_mahasiswa');
}
}
?>

*Notes 

- Perhatikan pada bagian fungsi save_mahasiswa dan update_mahasiswa setiap data array yang di lempar index arraynya harus sama dengan field yang ada dalam tabel tersebut seperti contoh di atas $data['npm'] hal ini berarti data tersebut akan di simpan dalam field npm yang ada dalam tabel.

Dari pada anda binggung dengan penjelasan saya lebih baik coba saja langsung gunakan model di atas dan gunakan pada controller yang ada punya anda hanya perlu mencokan nama tabel, field dan rules dari query yang anda gunakan. dan rasakan kemudahannya. Untuk keamanannya silahkan di nilai masing - masing mungkin para mastah lebih mengerti. mungkin bisa di modifikasi masing - masing untuk meningkatkan keamanannya.
Share:

Cara Menghilangkan Index.php di Codeigniter

Cara Menghilangkan Index.php di Codeigniter

Cara Menghilangkan Index.php di Codeigniter - Pada saat kita membuat sebuah controller di codeigniter secara default untuk mengaksesnya melalui URL di browser kita harus mengikutsertakan index.php setelah alamat project/folder kita sebagai contoh :

http://localhost/belajar_ci/index.php/hello_controller

seperti contoh di atas pada URI secara default kita harus sealalu mengikut sertakan file index.php untuk menjalankan controller yang di buat. akan tetapi index.php ini dapat dihilangkan dengan cara mengatur konfigurasi dari Codeigniter dan juga konfigurasi dari server web Aapache , yaitu file .htaccess 

Cara Menghilangkan Index.php di Codeigniter berikut ini adalah langkah - langkahnya :

1. Buka file config.php yang terdapat dalam direktori application/config
2. Cari bari kode berikut, biasanya terdapat pada baris ke-29  :

$config['index_page'] = 'index.php';

3. Hapus index.php nya menjadi seperti ini :

$config['index_page'] = '';

4. Save
5. Buatlah sebuah file baru di dalam root folder project codeigniter anda kemudian masukan kode berikut :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

6. Save as dengan nama .htaccess jangan lupa untuk merubah tipenya ketika mensave menjadi All Files.

7. Sekarang coba anda akses controller anda tanpa menggunakan index.php , contoh :

http://localhost/belajar_ci/hello_controller

Jika berhasil maka anda dapat mengakses controller anda.

jika tidak browser akan menampilkan halaman not found. tidak berhasil ? tenang, sebenarnya ada beberapa jenis kode .htaccess yang berbeda yang dapat anda gunakan jika tidak berhasil biasanya kodenya kurang cocok, mungkin bukan jodohnya bkakakaka. sekarang coba beberapa kode .htacces yang berbeda di bawah ini :

Jenis 2 :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]

Jenis 3 :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ nama_folder_project/index.php/$1 [L]

Jenis 4 :

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond $1 !^(index\.php|timthumb\.php|open-flash-chart\.swf|assets|captcha|application)
RewriteRule ^(.*)$ ./index.php/$1 [L]
</IfModule>

Jenis 5 :

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /nama_folder_project/

RewriteCond %{REQUEST_URI} ^system.*
RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_URI} ^application.*
RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

Jika masih belum berhasil juga sekarang pastikan bahwa modul mod_rewrite.co dari Apache anda telah di muat secara default oleh Apache, anda bisa mengeceknya dari file httpd.conf yang ada pada webserver anda, jika anda menggunakan XAMPP biasanya terdapat dalam direktori \xampp\apache\conf jika anda menggunakan WAMPP biasanya terdapat dalam direktori \wamp\bin\apache\apache.x.x.x\conf.

Buka file httpd.conf dengan notepad kemudian cari baris kode barikut :

LoadModule rewrite_module modules/mod_rewrite.so

Jika di depan kode berikut masih terdapat tanda pagar ( # ) hapus tanda pagarnya kemudian restart apache atau webserver anda dan cobalah lagi akses controller anda di browser tanpa menggunakan index.php.
Share:

Cara Passing Variable Controller ke View di Codeigniter

Cara Passing Variable Controller ke View di Codeigniter - Passing variable adalah proses pelemparan isi dari variabel dari suatu proses ke proses lain. Dalam kasus ini kali ini kita akan belajar cara melempar variable dari controller ke view di codeigniter. Hal ini di lakukan untuk membuat isi dari view menjadi lebih fleksibel karena isinya kita tentukan dari controller dan tugas view menampilkan isi variabel yang di lemparkan dari controller. Sekarang langsung saja kita meluncur ke prakteknya, biar lebih greget.

Baca juga : Cara Instal dan Konfigurasi PHP Framework Codeigniter 

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse. Karena program ini cukup sederhana saya sarankan menggunakan Notepad atau Notepad++ saja sudah cukup atau jika anda ingin lebih terstruktur gunakan netBeans.

Controller

Pertama bukalah terlebih dahulu folder codeingiter anda yang ada di dalam web server anda, jika anda belum menginstalnya baca di sini : Cara Instal dan Konfigurasi PHP Framework Codeigniter
Buka folder Application > Controllers. 
Buatlah sebuah file baru kemudian ketikan kode berikut :

<?php
class main extends CI_Controller {
function index(){
$data['isi_halaman'] = 'Hallo dunia sekarang saya sudah bisa passing variabel codeigniter';
$this->load->view('v_main', $data);
}
}
?>

Penjelasan : 
- Kita mendeklarasikan sebuah variabel array dengan nama $data dan diberi index "isi_halaman". kenapa array ? karena passing variabel dari controller ke view hanya dapat menggunakan data yang berbertuk array. 

- Kita meload sebuah view dengan nama "v_main" yang nanti akan kita buat di dalam folder view. dan kita melemparkan variabel $data. 

Simpan file tersebut dengan nama main.php.

View

Buka folder Application > View. 
Buatlah sebuah file baru kemudian ketikan kode berikut :

<html>
<body>
<?php echo $isi_halaman; ?>
</body>
</html>

Penjelasan : 

- Kita mencetak variabel yang di lemparkan oleh conttroller dengan cara memanggil index dari arraynya.

Simpan file tersebut dengan nama v_main.php.

Sekarang kita lihat hasilnya, buka browser anda kemudian ketikan di url :

http://localhost/codeigniter/index.php/main

*notes
-codeigniter adalah nama folder anda di webserver.

Cara Passing Variable Controller ke View di Codeigniter
Passing Variabel Codeigniter
Untuk latihan anda coba buat dua index array yang berbeda contoh :

$data['isi_1'] = 'ini isi 1';
$data['isi_2'] = 'ini isi 2';

Kemudian cetak keduanya di view.
Share:

Cara Instal dan Konfigurasi PHP Framework Codeigniter

Cara Instal dan Konfigurasi PHP Framework Codeigniter

Cara Instal dan Konfigurasi PHP Framework Codeigniter - Codeigniter ( CI ) adalah framework PHP yang digunakan untuk mempermudah user dalam pengembangan web. Codeigniter berisi kerangka untuk berkerja yang berisi kumpulan library class yang dapat digunakan untuk membuat program yang menggunakan PHP menjadi lebih mudah dan sitematis. Karena Codeigniter sudah kumpulan library class yang dapat di gunakan sehingga pemrograman tidak perlu memulai dari awal.
Sekarang bagaimanakah kita bisa menggunakan framework ini? ikuti langkah - langkah di bawah ini untuk memulai instalasi serta mengkonfigruasi PHP Frame Codeigniter pertama anda.

Instalasi

1. Pertama anda harus mengunduh terlebih dahulu file Codeigniternya di sini : DOWNLOAD
2. Ekstrak filenya ke dalam webserver anda.
3. Instalasi sudah selesai. Mudah bukan hanya tinggal ekstrak saja bkakakakak.
4. Sekarang untuk mengetesnya anda dapat membuka browser anda kemudian ketikan di urlnya :

http://localhost/Nama folder codeigniter yang anda ekstrak/

Jika muncul tampilan seperti ini maka anda berhasil.

Welcome Codeigniter
Welcome Codeigniter
Jika anda klik User Guide di sana ada semua tutorial dasar yang anda butuhkan untuk mempelajari Codeigniter.

Konfigurasi

Sekarang kita akan mempelajari konfigurasi dasar codeigniter. Buka folder codeigniter anda kemudian buka folder Application > Config 

Sekarang anda melihat ada banyak file di dalam folder cofig file inilah menyimpan data konfigurasi yang diperlukan oleh aplikasi.

1. Config

Buka file config.php anda. Perhatikan pada baris kode ini :

$config['base_url'] = '';

Disini tempat anda mendefinisikan alamat server dan folder anda. ubah baris ini menjadi :

$config['base_url'] = 'http://localhost/nama_folder_codeigniter_anda';

Perhatikan kembali pada baris kode ini :

$config['encryption_key'] = '';

Disini tempat anda mendefinisikan encription key anda, hal ini perlu di isi jika anda ingin melakukan session nantinya. anda dapat membuat sendiri encription key anda atau anda dapat menggunakan key generator di sini : KEY GENERATOR

Pilih yang Codeigniter Encription Key. contoh encription key anda sekarang :

$config['encryption_key'] = 'za2fYQ1iTEi7EJ5zI5AB099kQS4QZ3Cw';

2. Routes 

Buka file routes.php anda. Perhatikan pada baris kode ini :

$route['default_controller'] = "welcome";

Disinilah anda mendefinisikan controller default anda, contoh :

$route['default_controller'] = "main";

Main : adalah nama controller anda

anda juga dapat hanya menyebutkan nama controller dan nama fungsi yang ada di dalamnya, contoh :

$route['default_controller'] = "main/home";

Home : adalah nama fungsi yang ada dalam controller main.

Apabila anda belum membuat controller, tinggalkan saja / jangan di ubah dahulu baris ini.

3. Autoload

Buka file autoload.php anda. Perhatikan pada baris kode ini :

$autoload['libraries'] = array();

Disini tempat anda mendefinisikan library yang akan anda gunakan. ubah menjadi seperti ini :

$autoload['libraries'] = array('database', 'session', 'xmlrpc');


Perhatikan pada baris kode ini :

$autoload['helper'] = array();

Disini tempat anda mendefinisikan helper yang akan anda gunakan. ubah menjadi seperti ini :

$autoload['helper'] = array('url', 'file', 'text');

4. Database 

Konfigurasi ini di butuhkan apa bila anda menggunakan database. Buka file database.php perhaitkan pada baris kode ini :

$db['default']['hostname'] = '';
$db['default']['username'] = '';
$db['default']['password'] = '';
$db['default']['database'] = '';
$db['default']['dbdriver'] = '';

Hostname : Nama server anda atau host database anda
Username : Isi dengan username database anda. defaultnya adalah root
Password : Password database anda, defaultnya kosong
Database : Nama database anda.
Dbdriver : Driver database anda, biasanya mysql

sebagai contoh :

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'db_ci';
$db['default']['dbdriver'] = 'mysql';

Apabila anda belum membuat database kosongkan saja pada bagian databasenya.

Dengan konfigurasi dasar di atas sekarang anda sudah siap untuk mulai membuat website PHP dengan Framework Codeigniter anda. Kita bertemu lagi di postingan berikutnya untuk mulai belajar dasar - dasar untuk menggunakannya.
Share:

Cari Blog Ini

Diberdayakan oleh Blogger.

Statemen Kendali / Kondisional If di C#

Statemen Kendali / Kondisional If di C#  -  C# mempunyai statemen kendali yang hampir sama dengan bahasa - bahasa pemrograman lainnya. Ter...

Label

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Label Cloud

AJAX (3) Blogging (4) C (13) C# (15) Codeigniter (5) CSS (18) Game Maker (12) Google Maps (21) HTML (46) Instaling (2) Java (12) Java Script (40) JQUERY (16) PHP (12)

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.