CodePun

All post

Membuat animasi loading berputar sederhana menggunakan css

Pada postingan kali ini kita akan buat animasi loading atau preloader berputar sederhana menggunakan css nah animasi berputar banyak di temukan di website modern, animasi loading berputar menurut saya dapat mempercantik web, animasi loading berputar ini tidak terlalu rumit karna kita hanya bermain dengan css saja tanpa jquery ok langsung saja kita praktekan let,s the code

Kita hanya perlu membuat css seperti di bawah silahkan copy

<style>

.loader {

-webkit-animation: spin 1s linear infinite;

animation: spin 1s linear infinite;

border: 3px solid #ddd;

border-top: 3px solid #42a5f5;

border-radius: 50%;

height: 75px;

width: 75px;

}

@keyframes spin {

to {

border-top-color: #FF0000;

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

body {

background-color: #f1f2f3;

}

.container {

width: 200px;

margin: 70px auto;

}

</style>

Lalu copy code di bawah untuk menampilkan animasi loading nya

</div>

untuk code lengkap nya copy code di bawah

<html>

<head>

<style>

.loader {

-webkit-animation: spin 1s linear infinite;

animation: spin 1s linear infinite;

border: 3px solid #ddd;

border-top: 3px solid #42a5f5;

border-radius: 50%;

height: 75px;

width: 75px;

}

@keyframes spin {

to {

border-top-color: #FF0000;

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

body {

background-color: #f1f2f3;

}

.container {

width: 200px;

margin: 70px auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

Sekian postingan kali ini semoga bermanfaat jika ada yang di tanyakan silahkan isi kolom komentar terima kasih

Downlad Source Code CRUD Sederhana Dengan OOP PHP Dan MySQLi

CodePun

Bismillah

Ok sobat semua kesempatan kali ini kita akan coba Membuat CRUD Dengan OOP PHP Dan MySQLi Sebelum Bahas tentang crud ada baiknya kita bahas apa sih CRUD itu sendiri. CRUD adalah singkatan dari Create, Read, Update Dan Delete.nah ini berarti Crud itu terdiri dari proses input data ke dalam database, menampilkan data dari database, mengedit/mengupdate/mengubah data di database, dan juga tentunya menghapus data pada database.

Langsung aja kita ke code pertama kita buat databasenya terlebih dahulu di sini saya kasih nama databasenya tes

-- phpMyAdmin SQL Dump

-- version 3.5.2

-- http://www.phpmyadmin.net

-- Host: localhost

-- Server version: 5.5.25a

-- PHP Version: 5.4.4

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;

-- Database: `tes`

-- --------------------------------------------------------

-- Table structure for table `data`

CREATE TABLE IF NOT EXISTS `data` (

`id` int(22) NOT NULL AUTO_INCREMENT,

`nama` varchar(225) NOT NULL,

`alamat` text NOT NULL,

`telp` varchar(12) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

-- --------------------------------------------------------

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Setelah itu kita buat file dengan file index.php untuk halaman utamanya

<?php

include 'fungsi/fungsi.php';

$bjk = new data;

$lihat = $bjk->lihat();

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</a>

</div>

</nav>

<a class="btn btn-warning" href="tambah.php">tambah</a>

<tr><th>no</th><th>nama</th><th>alamat</th><th>telpon</th><th>aksi</th></tr>

<?php $n = 1; foreach ($lihat as $t) {

<tr><td><?= $n ?></td><td><?= $t['nama'] ?></td><td><?= $t['alamat'] ?></td><td><?= $t['telp'] ?></td><th><a class="btn btn-info" href="edit.php?id=<?= $t['id']

?>">edit</a> <a class="btn btn-danger" href="delet.php?id=<?= $t['id']

?>">delet</a> </th></tr>

<?php

$n++;

}

</table>

</div>

</body>

</html>

Nah kita tinggal buat file koneksi ke database dan mebuat form tambah edit dan hapus untuk file lengkapnya silahkan donlod di sini… semoga bermanfaat terimkasih

Membuat Live Chat Ala Facebook Menggunakan Php dan Jquery

Admin 5:21 AM jquery php Tutor Add Comment

CodePun

Mungkin bagi kalian penggun facebook sudah tidak asing dengan tampilan chat nya facebook yang di kenal dengan istilah live chat. Nah pada postingan kali ini yang akan bahas mengenai bagaiman sih cara buat chating online atau live chat mirip mirip facebook ini. ?

ok langsung saja kita ke code dan apa saja sih bahan yang di butuhkan

Langkah 1:

Kita butuh file jquery dan css yakni :

Langkah ke 2:

Kita buat file dengan nama tes.php copy kode di bawah

<span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('Ceena')">Ceena</a></span>

</div>

</div>

</div>

<span id="slider-username"> <a href="javascript:void(0)" onclick="javascript:chatWith('maman')">maman</a> </span>

</div>

</div>

<span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('knting')">knting</a> </span>

</div>

</div>

<span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('dadan')">dadan</a> </span>

</div>

Sampai di sini tahapan sudah selesai tinggal tes utnuk kode lengkap silahkan donlod di sini

Sekian postingan kali ini semoga bermanfaat terima kasih

Tutorial Membuat Game ular menggunakan HTML dan Jquery

Admin 4:59 AM jquery php Tutor Add Comment

CodePun

Bismilah

Lama tidak posting kali ini saya akan membagikan game ular atau game snake sebenarnya game ini bukan buatan saya namun dengan game ini saya banyak belajar ok langsung saja Let,s go pertama apa saja yang di butuhkan tentunya file jquery.min.js setelah itu kita buat file dengan nama index.hml lalu pastekan kode di bawah

<!DOCTYPE html>

<html>

<head>

<title> Snake Game </title>

<style>

#container {

margin: auto;

width: 600px;

}

#myCanvas {

background-color: black;

border: 3px white solid;

}

#gameover {

position : absolute;

top: 200px;

left: 600px;

font-size: 25px;

text-align: center;

color: #FFFFFF;

display: none;

}

#score {

width: 600px;

height: 100px;

margin: auto;

background-color: white;

border: 3px black solid;

color: black;

-webkit-box-shadow:0 0 20px #000;

-moz-box-shadow: 0 0 20px #000;

box-shadow:0 0 20px #000;

padding-left:5px;

}

#current, #highest {

font-size : 25px;

color: black;

text-align: center;

}

a {

text-decoration: none;

color : #FFFFFF;

background-color: #9c27b0;

padding-left:5px;

padding-right:5px;

border-radius: 7px;

}

a:hover{

text-decoration: none;

color : #FFFFFF;

background-color: #673ab7;

padding-left:5px;

padding-right:5px;

border-radius: 7px;

}

span {

color : #FFFFFF;

}

</style>

$(document).ready(function() {

var canvas = $("#myCanvas")[0];

var ctx = canvas.getContext("2d");

var w = $("#myCanvas").width();

var h = $("#myCanvas").height();

var cw = 15;

var food;

var snake;

var d = "RIGHT";

var gameloop = setInterval(update, 100);

function update() {

if (d == "RIGHT")

snake.x = snake.x + 1;

else if (d == "LEFT")

snake.x = snake.x - 1;

else if (d == "UP")

snake.y = snake.y - 1;

else if (d == "DOWN")

snake.y = snake.y + 1;

check_borders();

check_food();

blank();

paint_cell(food.x, food.y, "grey");

paint_cell(snake.x, snake.y, "green");

}

function showGameOver() {

var current = $('#current').text();

$('#final').text(current);

$('#gameover').fadeIn();

}

function updateHighScore() {

var current = $("#current").text();

var highest = $("#highest").text();

if (parseInt(current) > parseInt(highest)) {

$('#highest').text(current)

}

function placeFood() {

food = {

x : Math.round(Math.random()*(w-cw)/cw),

y : Math.round(Math.random()*(h-cw)/cw)

}

function placeSnake() {

snake = {

x : Math.round(Math.random()*(w-cw)/cw),

y : Math.round(Math.random()*(h-cw)/cw)

}

function blank(){

//Paint The Canvas

ctx.fillStyle = "black";

ctx.fillRect(0, 0, w, h);

ctx.strokeStyle = "white";

ctx.strokeRect(0, 0, w, h);

}

function check_borders() {

if (snake.x < 0 || snake.x > (w-cw)/cw || snake.y < 0 || snake.y > (h-cw)/cw) {

clearInterval(gameloop);

showGameOver();

}

function paint_cell(x,y, color){

ctx.fillStyle=color;

ctx.fillRect(x*cw,y*cw,cw,cw);

ctx.strokeStyle="white";

ctx.strokeRect(x*cw,y*cw,cw,cw);

}

function check_food() {

if (food.x == snake.x && food.y == snake.y) {

var current = parseInt($('#current').text());

current += 1;

$('#current').text(current);

placeFood();

}

placeFood();

paint_cell(food.x, food.y, "grey");

placeSnake();

paint_cell(snake.x, snake.y, "green");

//Keyboard Controller

$(document).keydown(function(e){

//39: RIGHT

//37: LEFT

//38: UP

//40: DOWN

var key = e.which;

if(key == "37") {

snake.x -= 1;

d = "LEFT";

}

else if(key == "38") {

snake.y -= 1;

d = "UP";

}

else if(key == "39") {

snake.x += 1;

d = "RIGHT";

}

else if(key == "40") {

snake.y += 1;

d = "DOWN";

}

check_food();

blank();

color = "grey";

paint_cell(food.x, food.y);

color = "green";

paint_cell(snake.x, snake.y);

});

</script>

</head>

<body>

Game over!

<br>

skor kamu <span id="final"></span>

<br>

<a onClick="window.location.reload()" href="#">klik untuk main lagi</a>

</div>

Your browser does not support the canvas feature

</canvas>

</div>

<div>gunakan panah ke kiri kanan atas dan bawah untuk menggerakan <span id="highest"></span>

</div>

</body>

</html>

Cukup sekian postingan kali ini semoga bermanfaat untuk source codenya silahkan download di sini