Ajax

Ajax

Cara Membuat Crud Ajax dan Modal Jquery

Cara Membuat Crud Ajax dan Modal Jquery

Cara Membuat Crud Ajax dan Modal Jquery pada pelajaran kali ini admin akan membagikan tutorial datatable Cara Membuat Crud Ajax dan Modal Jquery silahkan copy skrip dibawah ini dan simpan dengan nama index.html dan pastikan anda terhubung ke internet dan coba buka halamannya di browser, berikut codenya : <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> <title>Bootstrap CRUD Data Table for Database with Modal Form</title> <link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Roboto|Varela+Round”> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”> <link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”> <script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script> <script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”></script> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script> <style> body { color: #566787; background: #f5f5f5; font-family: ‘Varela Round’, sans-serif; font-size: 13px; } .table-responsive { margin: 30px 0; } .table-wrapper { background: #fff; padding: 20px 25px; border-radius: 3px; min-width: 1000px; box-shadow: 0 1px 1px rgba(0,0,0,.05); } .table-title { padding-bottom: 15px; background: #435d7d; color: #fff; padding: 16px 30px; min-width: 100%; margin: -20px -25px 10px; border-radius: 3px 3px 0 0; } .table-title h2 { margin: 5px 0 0; font-size: 24px; } .table-title .btn-group { float: right; } .table-title .btn { color: #fff; float: right; font-size: 13px; border: none; min-width: 50px; border-radius: 2px; border: none; outline: none !important; margin-left: 10px; } .table-title .btn i { float: left; font-size: 21px; margin-right: 5px; } .table-title .btn span { float: left; margin-top: 2px; } table.table tr th, table.table tr td { border-color: #e9e9e9; padding: 12px 15px; vertical-align: middle; } table.table tr th:first-child { width: 60px; } table.table tr th:last-child { width: 100px; } table.table-striped tbody tr:nth-of-type(odd) { background-color: #fcfcfc; } table.table-striped.table-hover tbody tr:hover { background: #f5f5f5; } table.table th i { font-size: 13px; margin: 0 5px; cursor: pointer; } table.table td:last-child i { opacity: 0.9; font-size: 22px; margin: 0 5px; } table.table td a { font-weight: bold; color: #566787; display: inline-block; text-decoration: none; outline: none !important; } table.table td a:hover { color: #2196F3; } table.table td a.edit { color: #FFC107; } table.table td a.delete { color: #F44336; } table.table td i { font-size: 19px; } table.table .avatar { border-radius: 50%; vertical-align: middle; margin-right: 10px; } .pagination { float: right; margin: 0 0 5px; } .pagination li a { border: none; font-size: 13px; min-width: 30px; min-height: 30px; color: #999; margin: 0 2px; line-height: 30px; border-radius: 2px !important; text-align: center; padding: 0 6px; } .pagination li a:hover { color: #666; } .pagination li.active a, .pagination li.active a.page-link { background: #03A9F4; } .pagination li.active a:hover { background: #0397d6; } .pagination li.disabled i { color: #ccc; } .pagination li i { font-size: 16px; padding-top: 6px } .hint-text { float: left; margin-top: 10px; font-size: 13px; } /* Custom checkbox */ .custom-checkbox { position: relative; } .custom-checkbox input[type=”checkbox”] { opacity: 0; position: absolute; margin: 5px 0 0 3px; z-index: 9; } .custom-checkbox label:before{ width: 18px; height: 18px; } .custom-checkbox label:before { content: ”; margin-right: 10px; display: inline-block; vertical-align: text-top; background: white; border: 1px solid #bbb; border-radius: 2px; box-sizing: border-box; z-index: 2; } .custom-checkbox input[type=”checkbox”]:checked + label:after { content: ”; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid #000; border-width: 0 3px 3px 0; transform: inherit; z-index: 3; transform: rotateZ(45deg); } .custom-checkbox input[type=”checkbox”]:checked + label:before { border-color: #03A9F4; background: #03A9F4; } .custom-checkbox input[type=”checkbox”]:checked + label:after { border-color: #fff; } .custom-checkbox input[type=”checkbox”]:disabled + label:before { color: #b8b8b8; cursor: auto; box-shadow: none; background: #ddd; } /* Modal styles */ .modal .modal-dialog { max-width: 400px; } .modal .modal-header, .modal .modal-body, .modal .modal-footer { padding: 20px 30px; } .modal .modal-content { border-radius: 3px; font-size: 14px; } .modal .modal-footer { background: #ecf0f1; border-radius: 0 0 3px 3px; } .modal .modal-title { display: inline-block; } .modal .form-control { border-radius: 2px; box-shadow: none; border-color: #dddddd; } .modal textarea.form-control { resize: vertical; } .modal .btn { border-radius: 2px; min-width: 100px; } .modal form label { font-weight: normal; } </style> <script> $(document).ready(function(){ // Activate tooltip $(‘[data-toggle=”tooltip”]’).tooltip(); // Select/Deselect checkboxes var checkbox = $(‘table tbody input[type=”checkbox”]’); $(“#selectAll”).click(function(){ if(this.checked){ checkbox.each(function(){ this.checked = true; }); } else{ checkbox.each(function(){ this.checked = false; }); } }); checkbox.click(function(){ if(!this.checked){ $(“#selectAll”).prop(“checked”, false); } }); }); </script> </head> <body> <div class=”container-xl”> <div class=”table-responsive”> <div class=”table-wrapper”> <div class=”table-title”> <div class=”row”> <div class=”col-sm-6″> <h2>Manage <b>Employees</b></h2> </div> <div class=”col-sm-6″> <a href=”#addEmployeeModal” class=”btn btn-success” data-toggle=”modal”><i class=”material-icons”>&#xE147;</i> <span>Add New Employee</span></a> <a href=”#deleteEmployeeModal” class=”btn btn-danger” data-toggle=”modal”><i class=”material-icons”>&#xE15C;</i> <span>Delete</span></a> </div> </div> </div> <table class=”table table-striped table-hover”> <thead> <tr> <th> <span class=”custom-checkbox”> <input type=”checkbox” id=”selectAll”> <label for=”selectAll”></label> </span> </th> <th>Name</th> <th>Email</th> <th>Address</th> <th>Phone</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td> <span class=”custom-checkbox”> <input type=”checkbox” id=”checkbox1″ name=”options[]” value=”1″> <label for=”checkbox1″></label> </span> </td> <td>Thomas Hardy</td> <td>thomashardy@mail.com</td> <td>89 Chiaroscuro Rd, Portland, USA</td> <td>(171) 555-2222</td> <td> <a href=”#editEmployeeModal” class=”edit” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Edit”>&#xE254;</i></a> <a href=”#deleteEmployeeModal” class=”delete” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Delete”>&#xE872;</i></a> </td> </tr> <tr> <td> <span class=”custom-checkbox”> <input type=”checkbox” id=”checkbox2″ name=”options[]” value=”1″> <label for=”checkbox2″></label> </span> </td> <td>Dominique Perrier</td> <td>dominiqueperrier@mail.com</td> <td>Obere Str. 57, Berlin, Germany</td> <td>(313) 555-5735</td> <td> <a href=”#editEmployeeModal” class=”edit” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Edit”>&#xE254;</i></a> <a href=”#deleteEmployeeModal” class=”delete” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Delete”>&#xE872;</i></a> </td> </tr> <tr> <td> <span class=”custom-checkbox”> <input type=”checkbox” id=”checkbox3″ name=”options[]” value=”1″> <label for=”checkbox3″></label> </span> </td> <td>Maria Anders</td> <td>mariaanders@mail.com</td> <td>25, rue Lauriston, Paris, France</td> <td>(503) 555-9931</td> <td> <a href=”#editEmployeeModal” class=”edit” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Edit”>&#xE254;</i></a> <a href=”#deleteEmployeeModal” class=”delete” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Delete”>&#xE872;</i></a> </td> </tr> <tr> <td> <span class=”custom-checkbox”> <input type=”checkbox” id=”checkbox4″ name=”options[]” value=”1″> <label for=”checkbox4″></label> </span> </td> <td>Fran Wilson</td> <td>franwilson@mail.com</td> <td>C/ Araquil, 67, Madrid, Spain</td> <td>(204) 619-5731</td> <td> <a href=”#editEmployeeModal” class=”edit” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Edit”>&#xE254;</i></a> <a href=”#deleteEmployeeModal” class=”delete” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Delete”>&#xE872;</i></a> </td> </tr> <tr> <td> <span class=”custom-checkbox”> <input type=”checkbox” id=”checkbox5″ name=”options[]” value=”1″> <label for=”checkbox5″></label> </span> </td> <td>Martin Blank</td> <td>martinblank@mail.com</td> <td>Via Monte Bianco 34, Turin, Italy</td> <td>(480) 631-2097</td> <td> <a href=”#editEmployeeModal” class=”edit” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Edit”>&#xE254;</i></a> <a href=”#deleteEmployeeModal” class=”delete” data-toggle=”modal”><i class=”material-icons” data-toggle=”tooltip” title=”Delete”>&#xE872;</i></a> </td> </tr> </tbody> </table> <div class=”clearfix”> <div class=”hint-text”>Showing <b>5</b> out of <b>25</b> entries</div> <ul class=”pagination”> <li class=”page-item disabled”><a href=”#”>Previous</a></li> <li class=”page-item”><a href=”#” class=”page-link”>1</a></li> <li class=”page-item”><a href=”#” class=”page-link”>2</a></li> <li class=”page-item active”><a href=”#” class=”page-link”>3</a></li> <li class=”page-item”><a href=”#” class=”page-link”>4</a></li> <li class=”page-item”><a href=”#” class=”page-link”>5</a></li> <li class=”page-item”><a href=”#” class=”page-link”>Next</a></li> </ul> </div> </div> </div> </div> <!– Edit Modal HTML –> <div id=”addEmployeeModal” class=”modal fade”> <div class=”modal-dialog”> <div class=”modal-content”> <form> <div class=”modal-header”> <h4 class=”modal-title”>Add Employee</h4> <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>&times;</button> </div> <div class=”modal-body”> <div class=”form-group”> <label>Name</label> <input type=”text” class=”form-control” required> </div> <div class=”form-group”> <label>Email</label> <input type=”email”

Cara Membuat Crud Ajax dan Modal Jquery Read More »

Kalkulator Sederhana Dengan Ajax Jquery Php

Halo sobat cara menciptakan kalkulator online dengan php , kali ini aku juga akan membagikan kepada anda suatu bimbingan sekaligus source code Ajax tentang cara menciptakan kalkulator dengan memakai ajax jquery serta php. Tapi bagi anda yang belum mengetahui apa itu ajax, jangan berkecil hati alasannya adalah anda dapat mengetahuinya lewat postingan aku sebelumnya tentang Dasar Pemahaman Ajax yang mesti dikenali oleh pemula . Oke mungkin sebagian dari anda tidak tabah lagi ingin mengetahuinya, oleh alasannya adalah itu mari kita pribadi diskusikan satu-persatu dibawah ini. Dalam pembuatan kalkulator dengan ajax ini kita juga menggunakan fungsi suatu form yang berkhasiat untuk men-submit hasil dari perhitungan kita semoga diproses oleh aba-aba php yang kita buat. Buat anda yang belum mengetahui cara menciptakan submit form menggunakan ajax jquery dan php , anda bisa baca disini , dan untuk anda yang sudah mengetahuinya, mari kita lanjut ketopik pembahasan kita yang pertama. 1. Buat sebuah halaman html dengan nama kalkulator.html , lalu ketikkan atau copy-paste saja seluruh script dibawah ini kedalamnya. Kalkulator sederhana dengan Ajax Kalkulator Sederhana dengan AJAX PHP dijumlahkan dengandikurangkan dengandikalikan dengandibagi dengan Halaman diatas berfungsi sebagai halaman utama sekaligus halaman tempat penginputan angka yang akan diproses. 2. Buat halaman php dengan nama kalkulator.php dan kemudian ketikkan atau copy-pastekan seluruh script php dibawah ini kedalamnya Halaman php ini berfungsi untuk halaman proses inti dari apa yang kita input pada halaman kalkulator.html. 3. Selanjutnya buat sebuah halaman Javascript dengan nama kalkulator.js, kemudian copy-pastekan saja seluruh script dibawah ini kedalamnya var xmlHttp = createXmlHttpRequestObject(); function createXmlHttpRequestObject() var xmlHttp; if(window.ActiveXObject) try xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”); catch (e) xmlHttp = false; else try xmlHttp = new XMLHttpRequest(); catch (e) xmlHttp = false; if (!xmlHttp) alert(“Obyek XMLHttpRequest gagal dibuat”); else return xmlHttp; function hitung() if (xmlHttp.readyState == 4 function handleServerResponse() if (xmlHttp.readyState == 4) if (xmlHttp.status == 200) xmlResponse = xmlHttp.responseXML; xmlDocumentElement = xmlResponse.documentElement; hasil = xmlDocumentElement.firstChild.data; document.getElementById(“output”).innerHTML = hasil; // setTimeout(‘process()’, 1000); else alert(“Ada masalah dalam koneksi ke server: ” + xmlHttp.statusText); Nah, halaman ini merupakan halaman yang berfungsi selaku perantaran antara halaman input “kalkulator.html” dengan halaman proses “kalkulator.php” , kalau anda sudah membaca postingan saya perihal dasar pemahaman ajax bagi pemula tadi, maka dibutuhkan anda telah mengetahui dengan yang aku maksud. Untuk melaksanakan acara tersebut, bagi yang belum tahu , anda dapat mengetikkan pada address kafetaria browser anda masing-masing “http://localhost/calculator/kalkulator.htm” tapi jangan sampai lupa mengaktifkan “Apache” untuk anda yang menggunakan Xampp. Atau untuk anda yang ingin mendownload eksklusif source code nya secara complete, anda mampu mendownloadnya pada link download dibawah ini. Download disini Terimaksih buat para sobat setia blog mencar ilmu cerdik php, jangan lupa share dan like nya sebagai upah kelelahan saya mengetik ilmu yang berguna ini terhadap anda semua, selamat berkreasi buat calon programer dunia, Salam hangat dari admin .

Kalkulator Sederhana Dengan Ajax Jquery Php Read More »

(Bimbingan Php) Membuat Info Dinding Auto Refresh Seperti Twitter Dengan Jquery Dan Php

Halo sobat , kali ini saya akan memperlihatkan source code php yang tentunya bisa aku jamin anda akan sangat menyukainya. Pada masalah ini kita akan melibatkan pertolongan dari Ajax Jquery. Penasaran ??? Oke eksklusif saja. Anda Tau kan Twitter ?? kalau kita masuk ke halaman depan twitter.com, maka akan kita lihat semacam berita dinding yang menampilkan status atau gosip modern dari para twitter. Berita modern tersebut ditampilkan secara scrolling, lalu menngunakan efek fade in. Pada postingan kali ini kita akan belajar menciptakan seperti itu, dimana pada acara kita kali ini, kita akan menampilkan lima info modern secara scolling dan fade in (dari pudar mejadi terang). Kemudian program kita secara periodik akan menganalisa ke database, jikalau ada info terbaru, maka akan eksklusif kita update di informasi dinding. Sekarang mari kita lihat algoritma dan arahan dari program ini. Algoritma : Membuat database user dan informasi Mengambil 5 info terbaru dari database Memasukkan 5 info ke dalam suatu variabel array, agar gampang melakukan proses scrolling Melakukan scrolling 5 info terbaru tersebut Mengecek gosip modern setiap 4 detik, jika ada yang terbaru, tambahkan ke dalam variabel array untuk scrolling tersebut. Berikut Kode Lengkapnya Berikut ialah struktur tabel_user dan tabel_berita CREATE TABLE `tabel_user` (   `nomor` int(5) NOT NULL auto_increment,   `userid` varchar(30) NOT NULL,   `password` varchar(30) NOT NULL,   `nama` varchar(30) NOT NULL,   `email` varchar(30) NOT NULL,   `photo` varchar(50) NOT NULL,   PRIMARY KEY  (`nomor`) ); CREATE TABLE `tabel_berita` (   `nomor` int(5) NOT NULL auto_increment,   `user_nomor` int(5) NOT NULL,   `waktu` datetime NOT NULL,   `info` tinytext NOT NULL,   PRIMARY KEY  (`nomor`) ); 1. Pada halaman index.php, Copy-kan kode php di bawah ini : Berita dinding seperti twitter Tes kirim pesan dari : Alex Budi Mitha Bagas Luthor 2. Pada Halaman cekdata.php, untuk memeriksa isu terbaru di database copy-kan code dibawah ini kedalam halaman cekdata.php : Sekian dari saya dan selamat menjajal . Download Source Code Lengkapnya pada link dibawah ini : Download

(Bimbingan Php) Membuat Info Dinding Auto Refresh Seperti Twitter Dengan Jquery Dan Php Read More »

Tanyakan Via Whatsapp