Berita Anda: Web | Berita dalam dan luar negeri Dengan Multi Bahasa

Home » Penelusuran Web

WhatsApp merupakan salah satu aplikasi chat yang sngat populer di Indonesia. Selain bisa digunakan di Smartphone, WhatsApp juga dapat dinikmati via WEB. Alamat resminya adalah https://web.whatsapp.com/.

Pada postingan kali ini saya akan membagikan tutorial tentang cara membuat tampilan web seperti pada halaman WhatsApp Web. Disini saya hanya akan membuat tampilan saja, untuk web dengan aksinya akan saya ajarkan pada postingan selanjutnya. Hasilnya nanti akan tampak seperti gambar dibawah :

Langsung saja dua code yang harus anda perhatikan adalah "index.html" dan "css.css" yang ada pada folder "asset/css/css.css".

index.html

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat QR Code</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png">
</head>
<body >
<div class="co">
<div class="content">
<div class="bc">
<div class="kiri">
<div class="title">Untuk menggunakan CodingRakitan di komputer Anda:</div>
<ol class="_1TxZR"><li class="_1Fl07">Buka CodingRakitan di telepon Anda</li><li class="_1Fl07"><span dir="ltr" class="selectable-text invisible-space copyable-text">Ketuk <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Menu <span class="_3PxOr"><svg height="24px" viewBox="0 0 24 24" width="24px"><rect fill="#f2f2f2" height="24" rx="3" width="24"></rect><path d="m12 15.5c.825 0 1.5.675 1.5 1.5s-.675 1.5-1.5 1.5-1.5-.675-1.5-1.5.675-1.5 1.5-1.5zm0-2c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5zm0-5c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5z" fill="#818b90"></path></svg></span></span></strong> atau <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Pengaturan <span class="_3PxOr"><svg width="24" height="24" viewBox="0 0 24 24"><rect fill="#F2F2F2" width="24" height="24" rx="3"></rect><path d="M9.34 8.694a4.164 4.164 0 0 0-1.606 3.289c0 1.338.63 2.528 1.61 3.292l-1.46 2.527a7.065 7.065 0 0 1-3.052-5.82c0-2.41 1.206-4.54 3.048-5.816l1.46 2.528zm6.713 2.859c-.217-2.079-1.992-3.739-4.148-3.739-.578 0-1.128.116-1.628.329L8.819 5.617a7.042 7.042 0 0 1 3.086-.704c3.76 0 6.834 2.958 7.059 6.64h-2.91zm-1.065.43a3.083 3.083 0 1 1-6.166 0 3.083 3.083 0 0 1 6.166 0zm-6.164 6.364l1.458-2.523a4.153 4.153 0 0 0 1.623.322 4.154 4.154 0 0 0 4.12-3.524h2.922a7.062 7.062 0 0 1-7.042 6.426c-1.105 0-2.15-.25-3.081-.7zm11.197-7.21a7.88 7.88 0 0 0-.404-1.824l.286-.12a.527.527 0 0 0-.403-.973l-.29.12a8.176 8.176 0 0 0-1.197-1.77l.231-.23a.526.526 0 1 0-.744-.744l-.234.234a8.17 8.17 0 0 0-1.775-1.18l.13-.31a.526.526 0 1 0-.972-.403l-.12.313a8.463 8.463 0 0 0-1.995-.405v-.35A.533.533 0 0 0 12 2.97a.533.533 0 0 0-.535.526v.338a8.02 8.02 0 0 0-2.173.416l-.13-.313a.526.526 0 0 0-.972.402l.129.311a8.171 8.171 0 0 0-1.775 1.18l-.235-.235a.526.526 0 0 0-.743.744l.23.231A8.175 8.175 0 0 0 4.6 8.34l-.29-.12a.526.526 0 0 0-.403.971l.285.122a7.882 7.882 0 0 0-.404 1.824h-.322a.533.533 0 0 0-.526.534c0 .29.235.535.526.535h.28c.02.831.166 1.624.418 2.378l-.257.1a.523.523 0 1 0 .402.968l.252-.105a8.17 8.17 0 0 0 1.191 1.797l-.187.187a.526.526 0 1 0 .744.743l.184-.183a8.173 8.173 0 0 0 1.792 1.208l-.096.231a.526.526 0 1 0 .972.403l.096-.23c.698.24 1.436.387 2.208.428v.243c0 .29.244.526.535.526.29 0 .534-.235.534-.526v-.253a8.012 8.012 0 0 0 2.03-.417l.09.229a.523.523 0 1 0 .967-.403l-.096-.231a8.172 8.172 0 0 0 1.792-1.208l.184.183a.526.526 0 1 0 .743-.744l-.187-.186a8.174 8.174 0 0 0 1.191-1.798l.252.104a.526.526 0 1 0 .403-.971l-.257-.095a8.074 8.074 0 0 0 .417-2.378h.281c.29 0 .526-.244.526-.535a.533.533 0 0 0-.526-.534h-.323z" fill="#818B90"></path></svg></span></span></strong> dan pilih <strong>CodingRakitan Web</strong></span></li><li class="_1Fl07">Arahkan telepon Anda ke layar ini untuk memindai kode tersebut</li></ol>
</div>
<div class="kanan">
<img src="asset/gambar_kode/qrkode.png">
</div>
</div>

</div>
</div>
<div class="back">
<div class="logo">
<div class="l">
<img src="asset/icon/logo.png">
</div>
<div class="j">
<a href="">CODINGRAKITAN.BLOGSPOT.COM</a>
</div>

</div>
</div>

</body>
</html>

Kode di atas berfungsi sebagai kerangka.

css.css

body{
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.content{
margin: auto;
width: 65%;
text-align: center;
background: white;
margin-top: 100px;
padding: 64px 60px 110px;
box-shadow: 0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24);
border-radius: 4px;
}.content img{
width: 100%;
/*box-shadow: 2px 1px 4px 1px;*/

}.back{
background: #bd1e1e;
width: 100%;
height: 222px;
}.co{
width: 100%;
position: absolute;
}.bc{
display: flex;
}
.kiri{
max-width: 556px;
/*float: left;*/
}.kanan{
max-width: 264px;
margin-left: 60px;
/*float: left;*/
}.title{
color: #55636b;
font-size: 28px;
font-weight: 300;
line-height: normal;
vertical-align: baseline;
text-align: left;
margin-bottom: 52px;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
}._1TxZR{
text-align: left;
padding: 0 0 0 24px;
margin: 0;

list-style: none;
list-style-type: decimal;
font: inherit;
font-size: inherit;
font-size: 100%;
vertical-align: baseline;
outline: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: #4b4b4b;
text-rendering: optimizeLegibility;
font-size: 18px;
line-height: 28px;

}li{
margin-top: 18px;
}.logo img{
width: 50px;
height: 50px;

}.logo{
width: 78%;
margin: auto;
padding-top: 25px;
}.logo a{
text-decoration: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: white;
font-size: 12px;
}.l{
float: left;
}.j{
float: left;
padding: 13px;
}

File ini berfungsi untuk mengatur tampilan kerangka yang telah dibuat, seperti warna, ukuran, font, dll.

Silahkan download project file disini.
Aziz Blogger June 30, 2019 Admin Bandung Indonesia

Membuat Tampilan Seperti WhatsApp Web dengan HTML dan CSS

WhatsApp merupakan salah satu aplikasi chat yang sngat populer di Indonesia. Selain bisa digunakan di Smartphone, WhatsApp juga dapat dinikmati via WEB....

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan Facebook, saya akan membagikan project yang telah saya buat di akhir postingan. Hasil tampilan nantinya akan nampak seperti gambar berikut.

File utama yang harus anda perhatikan, ada pada file index.php dan css.css dalam folder "asset/css/". Untuk anda yang sudah terbiasa dengan dunia pemrograman web tentunya sudah paham dengan kode-kode yang akan saya bagikan. Bagi yag baru belajar silahkan dalami dulu tentang HTML dan juga CSS.

Index.php

<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/js.js"></script>
</head>
<body>
<div class="menu_atas">
<div class="kiri">
<div class="logo">
<img src="asset/icon/logo.png">
</div>
<div class="cari">
<div class="input">
<input type="text" name="cari" placeholder="Cari">
<div class="cr">
<img src="asset/icon/cari.png">
</div>
</div>
</div>
</div>
<div class="kanan">
<div class="menu">
<div class="m">
<div class="ic_prof">

</div>
<div class="nama">
<a href="#">Coding</a>
</div>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Beranda</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Buat</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m2">
<div class="ic">

</div>
</div>
<div class="m2">
<div class="ic2">

</div>
</div>
<div class="m2">
<div class="ic3">

</div>
</div>
<div class="m2">
<div class="ic4">

</div>
</div>
<div class="m2">
<div class="ic5" id="drop">

</div>
<div class="ii" style="display: none;">

</div>
<div class="menu_drop" style="display: none;">
<div class="menud">
<a>Grup</a>
</div>
<div class="menud">
<a>Halaman</a>
</div>
<div class="menud">
<a>Aktivitas</a>
</div>
<div class="menud">
<a>Pengaturan</a>
</div>
<div class="menud">
<a>Keluar</a>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="content">

</div>
<script type="text/javascript">
$('#drop').click(function () {
var clas = $(this).attr('class');
if (clas=="ic5_putih") {
$(this).attr('class', 'ic5');
$('.menu_drop').attr('style','display: none;');
$('.ii').attr('style','display: none;');
}
if (clas=="ic5") {
$(this).attr('class', 'ic5_putih');
$('.menu_drop').attr('style','display: block;');
$('.ii').attr('style','display: block;');
}
})
</script>
</body>
</html>

Css.css

body{
margin: unset;
background: #dedede;
}
.menu_atas{
width: 100%;
height: 43px;
background: #ea4335;
border-bottom: 1px solid #7d2929;
}.kiri{
margin-left: 5%;
width: 50%;
height: 100%;
float: left;
}
.kanan{
width: 35%;
height: 100%;
float: left;
}.logo{
padding: 10px;
width: 50px;
float: left;
padding-right: 0px;
}.logo img{
width: 50%;
}.cari{
padding: 10px;
padding-left: 0px;
float: left;
width: 70%;
}.cari input{
width: 90%;
padding: 3px;
float: left;
font-size: 100%;
border:unset;

}.input{
background: white;
border-radius: 2px;
overflow: hidden;
display: flex;

}.cr{
float: left;
padding-top: 5px;
width: 9%;
text-align: center;
cursor: pointer;
}.cr img{
width: 15px;
}.cr:hover{
background: #ebedf0;
}.cr:active{
background: unset;
}.menu{
padding: 7px;
display: flex;
font-family: calibri;

}.menu a{
color: white;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}.m{
padding: 5px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}.m2{
padding: 3px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}
.m:hover{
background: #7d2929;
border-radius: 4px;
}.mn{
padding: 5px;
padding-right: unset;
padding-left: unset;

}.g{
border-right:1px solid #ce3232;
height: 100%;
}.ic_prof{
width: 20px;
height: 20px;
background-image: url('../icon/a.jpg');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
border-radius: 100%;
float: left;

}.nama{
margin-left: 7px;
float: left;
}.ic{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -25px -319px;
}.ic2{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -75px -319px;
}
.ic3{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -50px -294px;
}
.ic4 {
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: 0 -344px;
}.ic5{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -101px -294px;
}.ic5_putih{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -76px -294px;
}
.menu_drop{
width: 150px;
background: white;
position: absolute;
box-shadow: 0px 0px 8px -2px;
border-radius: 2px;
top: 48px;
right: 192px;
border: 1px solid #b6b2b2;
overflow: hidden;
}.ii{
width: 16px;
height: 8px;
background-image: url('../icon/ic2.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -401px -245px;
position: absolute;
top: 36px;
right: 215px;
}.menud{
padding: 5px;
padding-left: 30px;
}.menud a{
color: black;
font-family: roboto;
font-weight: 300;
font-size: 12px;
}.menud:hover{
background: red;
}.menud:hover a{
color: white;
}

Untuk folder dan atribut lengkap silahkan download file projectnya disini.

Aziz Blogger June 28, 2019 Admin Bandung Indonesia

Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan...

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui bagaimana Scroll Auto Load ini anda bisa melihat contohnya seperti di bawah ini.

Pada pembuatan tampilan seperti di atas kita hanya akan menggunakan data manual bukan dari database. Untuk membuat scroll auto load ini kita juga membutuhkan jquery, serta jquery inview yang dapat anda download melalui tautan di bawah.

Setelah selesai mendownload file di atas sekarang buatlah sebuah folder baru di localhost anda dan pastikan XAMP anda telah di aktifkan. Lanjut buat folder dengan nama disesuaikan dengan keinginan teman-teman saya sendiri memberi nama folder dengan "coba". Setelah itu buat direktori dengan susunan seperti berikut :

Untuk file-file tambahan nantinya akan saya sertakan pada link download project di bawah. Yang perlu teman-teman ketahui disini adalah file "index.php", dan "data.php". Isi dari kedua file tersebut seperti berikut :

Index.php

<!DOCTYPE html>
<html>
<head>
<title>WHM</title>
<link rel="stylesheet" type="text/css" href="asset/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/jq.inview.js"></script>
</head>
<body>
<div class="atas">
<div class="menu_atas">
<div class="logo">
<h3>Aplikasi Percobaan</h3>
</div>
<div class="search">
<input type="text" name="cari" id="input" placeholder="Masukkan Kata Kunci">
</div>
<div class="menu">
<h3>Kategori</h3>
</div>
</div>
</div>
<div class="tengah">

</div>
<div class="bawah" id="bawah">
<div class="loader">
<img src="asset/gambar/loading.gif" class="load" id="load" style="visibility: hidden;">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#bawah').on('inview', function(event, isInView) {
$('#load').attr('style', 'visibility:visible');
if (isInView) {

$.ajax({
type: 'POST',
url: 'data.php',
data: { page: 3 },
success: function(data){
if(data != ''){
$('.tengah').append(data);
// $('#load').attr('style', 'visibility:hidden');
} else {
$("#loader").hide();
}
}
});
}
});
});
</script>
</body>
</html>

Hal yang perlu anda garis bawahi atau pahamai terdapat pada code javascript. Pada kode tersebut di setel bahwa ketika "$("#bawah")" tampil atau inview maka data.php akan di muat kedalam div yang memiliki nama class "tengah" menggunakan bantuan ajax.

Data.php

<?php
for ($i=0; $i < 5 ; $i++) {
?>
<div class="card">
<div class="gambar">
<img src="asset/gambar/1.png">
</div>
<div class="atribut">
<div class="nama">
<a>SAMSUNG Galaxy Tab S4 2018</a>
</div>
<div class="harga">
<h2>Rp 30.000</h2>
</div>
<div class="deskripsi">

</div>
</div>

</div>

<?php } ?>

Kode di atas kita menampilkan card view yang berjumlah 5, dengan menggunakan proses perulangan. Teman-teman bisa memodifikasi file ini untuk menampilkan data dari database.

Untuk file projectnya bisa teman-teman download disini

Aziz Blogger June 28, 2019 Admin Bandung Indonesia

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui...

Cara Pemasangan Codeigniter untuk Pemulan

Hai sobat sekalian kali ini saya akan berbagi seputar framework PHP yang sudah tidak asing lagi. Codeigniter adalah framework PHP yang akan kita bahas...

Hai teman-teman codrat semua semoga kalian sehat selalu. Kali ini saya ingin berbagi tentang cara membuat login menggunakan akun google pada website yang kita miliki. Dengan adanya fitur ini pengunjung web tidak akan susah untuk mendaftar dan akan membuat orang yang tadinya malas mendafatar jadi turut mendaftar karena kemudahannya.

Google Sign api yang akan kita gunakan agar nantinya calon pendaftar hanya tinggal memasukkan akun google mereka. Anda sebagai pemilik web bisa menyimpan data mereka kedalam database atau tidak. Adapun data yang bisa anda simpan adalah email, nama lengakp, nama depan, nama belakang, id, hingga gambar thumb.

Jangan berharap yah untuk bisa mendapatkan password mereka karena pihak google sendiri membatasinya. Selain tidak dapat password pengunjung salah satu hal yang susah dalam pembuatan login goole ini, anda harus memiliki hosting dan domain.

Susah jika anda hanya ingin menggunakan localhost, sebab biasnya aplikasi akan error. Tapi teman-teman tidak perlu khawatir, beacause kita bisa menggunakan penyedia hosting gratis seperti 000webhost.com.

Jika anda belum memiliki akun di 000webhost.com, silahkan buat terlebih dahulu. Jika sudah punya silahkan anda lanjutkan untuk membuat api Google Sign.

Membuat Hosting dan domain di 000webhost.com

1. Buka halaman https://id.000webhost.com/ dan silahkan login.

2. Setelah anda berhasil login silahkan cari tanda tambah seperti pada gambar kemudian klik.

3. Isi pertanyaan kemudian klik next atau selanjutnya

4. Isi nama website (jangan ada spasi karena nanti akan eror), pilih password default atau buat sendiri. Setelah itu klik Buat.

5. Jika website anda sudah di buat maka akan tampil alamat web anda. Sekarang anda punya domain dan hosting secara gratis (ingat karena ini gratis dia memiliki jangka waktu tertentu). Silahkan catat alamat domain gratis anda ini.

Mendaftarkan Aplikasi kedalam Google Sign

Sebelum kita membuat koding login menggunakan google sebelumnya kita perlu mendapatkan Client Id dengan cara sebagai berikut :

1. Buka halaman https://console.cloud.google.com/ dan login menggunakan akun google anda.

2. Klik buat pada menu Kredensial.

3. Masukkan nama project dan lokasi (biarkan default saja) selanjutnya klik buat.

4. Selanjutnya akan muncul beberapa menu di halaman utama, klik Layar persetujuan OAuth.

5. Isi nama aplikasi sesuai keinginan anda dan jangan lupa isi gambar. Untuk form lainnya silahkan isi sesuai domain yang telah di daftarkan tadi, seperti gambar di bawah kemudian klik simpan.

6. Kembali ke menu Kredensial silahkan klik button biru yaitu Buat kredensial dan pilih ID Klien OAuth.

7. Silahkan pilih aplikasi web dan isi Asal JavaScript yang sah : nama_domain dan URI pengalihan yang sah : nama_domain/login.php lalu klik buat.

8. Anda akan mendapatkan kode ID Klien dan klien, silahkan disimpan baik-baik kalau bisa simpan menggunakan aplikasi notepad atau sebangsanya.

Tahap pengkoden

Ada 3 file yang harus anda buat yaitu :

index.php
login.php
home.php

index.php

<!DOCTYPE html>

<html>

<head>

    <title>Login Menggunakan Google</title>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <meta name="google-signin-client_id" content="PASTE_Clien_ID_disini" >

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-4 col-md-offset-4">

            <div class="account-box">

                <div class="logo">

                    <center>codingrakitan.blogspot.com</center>

                </div>

                <form class="form-signin" action="#">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="Email" required autofocus />

                </div>

                <div class="form-group">

                    <input type="password" class="form-control" placeholder="Password" required />

                </div>

                <label class="checkbox">

                    <input type="checkbox" value="remember-me" />

                    Keep me signed in

                </label>

                <button class="btn btn-lg btn-block purple-bg" type="submit">

                    Sign in</button>

                </form>

                <a class="forgotLnk" href="http://www.jquery2dotnet.com">I can't access my account</a>

                <div class="or-box">

                    <span class="or">OR</span>

                    <div class="row">

                        <div class="col-md-12">

                            <center><div class="g-signin2" data-onsuccess="onSignIn"></div></center><br>

                        </div>

                    </div>

                </div>

                <div class="or-box row-block">

                    <div class="row">

                        <div class="col-md-12 row-block">

                            <a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-block">Create New Account</a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

    function onSignIn(googleUser) {

    var profile = googleUser.getBasicProfile();

      if(profile){

          $.ajax({

                type: 'POST',

                url: 'login.php',

                data: {id:profile.getId(), name:profile.getName(), email:profile.getEmail(), image:profile.getImageUrl()}

            }).done(function(data){

                console.log(data);

                window.location.href = 'home.php';

            }).fail(function() {

                alert( "Posting failed." );

            });

      }

    }

</script>

</body>

</html>

login.php

<?php

    session_start();

    $_SESSION["id"] = $_POST["id"];

    $_SESSION["name"] = $_POST["name"];

    $_SESSION["email"] = $_POST["email"];
    $_SESSION["image"] = $_POST["image"];

    echo "Updated Successful";

?>

home.php

<?php
session_start();
?>
<!DOCTYPE html>

<html>

<head>

    <title>Welcome to ItSolutionStuff.com</title>
    <style type="text/css">
        body{
            text-align: center;
        }
    </style>
</head>

<body>

<h1>Website Home Page</h1>
<img src="<?php echo $_SESSION['image']; ?>">
<p><strong>Id: </strong> <?php echo $_SESSION['id']; ?> </p>

<p><strong>Name: </strong><?php echo $_SESSION['name']; ?></p>

<p><strong>Email: </strong><?php echo $_SESSION['email']; ?></p>
<a href="https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://codingrakitan.000webhostapp.com/" >Sign out</a>

</body>

</html>

Tahap upload

Setelah semua selesai di buat sekarang saatnya mangapload file kedalam hosting gratis kita yang sudah di buat tadi seperti berikut :

1. Buka halaman https://id.000webhost.com/members/website/list dan klik website manager lalu file manager.

2. Pilih uggah file sekarang maka anda akan di arahkan masuk kedalam file manager.

3. Silahkan klik ikon upload files kemudian select files. Ketika jendela baru terbuka silahkan cari 3 file yang telah dibuat tadi kemudian tekan ok dan selanjutnya tekan upload. Tunggu hingga proses upload selesai.

4. Buka halaman web anda dan lihat hasilnya ketika sign google di klik akan seperti berikut. Serta ketika sukses melakukan login.

Sekarang aplikasi yang anda buat telah berhasil, tinggal anda terapkan pada hosting/domain berbayar anda. Jika ada pertanyaan silahkan kirimkan melalui kolom komentar di bawah. Terima Kasih.

Aziz Blogger March 15, 2019 Admin Bandung Indonesia

Cara Membuat Fitur Login Menggunakan Akun Google pada Website

Hai teman-teman codrat semua semoga kalian sehat selalu. Kali ini saya ingin berbagi tentang cara membuat login menggunakan akun google pada website yang...

Pages 3 of 5 Prev 1 234 5 Next