Oktober 2019 - PenyairCoding (Bergerak & Kemudian Terjadi)
Latest Post
Tunggu...

Kamis, 31 Oktober 2019

Cara Instal Adminlte di Yii2 Advanced

Cara Instal Adminlte di Yii2 Advanced



Cara Install Admin LTE YII2 AdvancedSudah kita bahas sebelumnya apa itu framework Yii2, dalam kesempatan ini penulis mencoba memberikan tutorial singkat bagaimana cara install AdminLTE pada framework yii2 advanced, di tutorial sebelumnya kita telah membuat form login pada yii2 advanced Membuat Login Pada Yii2 Advanced..

Langkah awal dalam menginstal adminLTE pada yii2 advanced pertama adalah masuk kedalam folder yii2 (dalam kasus ini penulis memberikan nama advanced (sama seperti tutorial sebelumnya) pada direktori htdocs).
Ketikan kode/skrip dibawah ini di dalam command prompt yang telah tertuju kedalam folder advandced.

composer require dmstr/yii2-adminlte-asset "^2.1"


Contoh seperti gambar dibawah ini:
Cara Install Admin LTE YII2 Advanced

Tekan enter, tunggu hingga instalasi selesai. Penulis berasumsi bahwa sobat sudah paham apa itu composer. Jika belum sobat bisa masuk ke link ini CaraInstalComposer.
Jika proses instalasi AdminLTE sudah selesai. Cari file main.php dalam folder backend/config. Selanjutnya masukan kode/skrip berikut di dalam file main.php.
 'view' => [
         'theme' => [
             'pathMap' => [
                '@app/views' => '@vendor/dmstr/yii2-adminlte-asset/example-views/yiisoft/yii2-app'
             ],
         ],
    ],
Lihat gambar di bawah ini:
Cara Install Admin LTE YII2 Advanced
Letakan kode/skrip di atas tepat seperti pada gambar.

Jalankan aplikasi yii2 advanced pada web browser. Maka hasil akan seperti gambar di bawah ini;
Cara Install Admin LTE YII2 Advanced

Gambar diatas merupakan halaman login pada AdminLTE yang sebelumnya telah kita instal. Login pada halaman backend, jika langkah sudah benar maka hasilnya akan seperti gambar dibawah ini;

Cara Install Admin LTE YII2 Advanced
Tampilan AdminLTE jika kita telah berhasil Login.

Penulis yakin sobat pasti bisa, semoga tutorial singkat ini dapat membantu dan bermanfaat, terus belajar and good luck.

Membuat Login di Yii2 Advanced Dengan Database

Membuat Login di Yii2 

Membuat Login di Yii2 Advanced Dengan Database

Pada tutorial sebelumnya CaraInstallFrameworkYii2. Penulis telah membahas tentang Yii2 advanced dan basic. Sesuai dengan janji penulis, kini saatnya membuat login pada yii2 advanced.
Template advanced sendiri telah memiliki form login dan signup yang terdapat pada backend dan frontend (untuk melanjutkan tutorial sebelumnya silahkan masuk ke web browser dan ketik Url dibawah ini)

Url dibawah ini untuk mengakses halaman frontend pada template yii2 advanced
http://localhost/advanced/frontend/web/

Url dibawah ini untuk mengakses halaman backend pada template yii2 advanced
http://localhost/advanced/backend/web/

Masuk kedalam folder advanced dalam htdocs dengan cmd (command prompt) ketik kode berikut didalam cmd kalian:

cd/xampp/htdocs/advanced

Sebelum kita melakukan migrasi database user pada yii2 advanced, silahkan sobat masuk kedalam folder common kemudian folder config dan cari file dengan nama main-local.php
<?php
return [
    'components' => [
        'db' => [
            'class' => 'yii\db\Connection',
            'dsn' => 'mysql:host=localhost;dbname=yii2advanced',
            'username' => 'root',
            'password' => '',
            'charset' => 'utf8',
        ],
        'mailer' => [
            'class' => 'yii\swiftmailer\Mailer',
            'viewPath' => '@common/mail',
            // send all mails to a file by default. You have to set
            // 'useFileTransport' to false and configure a transport
            // for the mailer to send real emails.
            'useFileTransport' => true,
        ],
    ],
];
Perhatikan skrip diatas, skrip diatas merupakan isi dalam file main-local.php
  • 'dsn' adalah fungsi untuk memanggil nama database 
  • 'username' merupakan nama dari user akses dalam database
  • 'password 'merupakan password yang ada dalam database
*Note ; penulis membuat database dengan nama yii2advanced

Jika penggunaannya masih default, maka cukup ganti nama database kalian, penulis menggunakan nama yii2advanced untuk nama database.

Ketik kode dibawah ini pada cmd kalian, yang sebelumnya sudah masuk kedalam direktori advanced.
php yii migrate

Membuat Login Yii2 Advanced

Perhatikan gambar diatas, gambar diatas adalah proses disaat kita melakukan migrasi pada database yang sebelumnya telah kita buat.

PHPMyAdmin
Setelah melakukan migrasi, maka otomatis dalam database terdapat dua buah tabel yaitu migration dan user.

Tahap selanjutnya kita masuk ke halaman frontend pada yii2 kemudian pilih sign up.

Ketik Url dibawah ini pada web browser
http://localhost/advanced/frontend/web/index.php?r=site%2Fsignup

Membuat Login di Yii2 Advanced

Gambar diatas merupakan hasil dari url frontend
Ketik username, email dan password, ini berfungsi untuk melakukan proses login, namun sebelum memasukan username, email dan password kita perlu membuat file SignupForm.php di dalam folder models.

Ketik atau copy-paste skrip dibawah ini, simpan dengan nama SignupForm.php didalam folder common/models.
<?php
/* \models\SignupForm.php */
 
namespace common\models;
 
use Yii;
use yii\base\Model;
 
/**
 * Signup form
 */
class SignupForm extends Model
{
    public $username;
    public $email;
    public $password;
    /**
     * @inheritdoc
     */
    public function rules()
    {
        return [
            ['username', 'trim'],
            ['username', 'required'],
            ['username', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This username has already been taken.'],
            ['username', 'string', 'min' => 2, 'max' => 255],
            ['email', 'trim'],
            ['email', 'required'],
            ['email', 'email'],
            ['email', 'string', 'max' => 255],
            ['email', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This email address has already been taken.'],
            ['password', 'required'],
            ['password', 'string', 'min' => 6],
        ];
    }
    /**
     * Signs user up.
     *
     * @return User|null the saved model or null if saving fails
     */
    public function signup()
    {
        if (!$this->validate()) {
            return null;
        }
        $user = new User();
        $user->username = $this->username;
        $user->email = $this->email;
        $user->setPassword($this->password);
        $user->generateAuthKey();
        return $user->save() ? $user : null;
    }
}
Modifikasi file User.php menjadi seperti skrip dibawah ini:
<?php
namespace common\models;
use Yii;
use yii\base\NotSupportedException;
use yii\behaviors\TimestampBehavior;
use yii\db\ActiveRecord;
use yii\web\IdentityInterface;
/**
 * User model
 *
 * @property integer $id
 * @property string $username
 * @property string $password_hash
 * @property string $password_reset_token
 * @property string $verification_token
 * @property string $email
 * @property string $auth_key
 * @property integer $status
 * @property integer $created_at
 * @property integer $updated_at
 * @property string $password write-only password
 */
class User extends ActiveRecord implements IdentityInterface
{
    const STATUS_DELETED = 0;
    const STATUS_INACTIVE = 9;
    const STATUS_ACTIVE = 10;
    /**
     * {@inheritdoc}
     */
    public static function tableName()
    {
        return '{{%user}}';
    }
    /**
     * {@inheritdoc}
     */
    public function behaviors()
    {
        return [
            TimestampBehavior::className(),
        ];
    }
    /**
     * {@inheritdoc}
     */
    public function rules()
    {
        return [
            ['status', 'default', 'value' => self::STATUS_ACTIVE],
            ['status', 'in', 'range' => [self::STATUS_ACTIVE, self::STATUS_ACTIVE, self::STATUS_DELETED]],
        ];
    }
    /**
     * {@inheritdoc}
     */
    public static function findIdentity($id)
    {
        return static::findOne(['id' => $id, 'status' => self::STATUS_ACTIVE]);
    }
    /**
     * {@inheritdoc}
     */
    public static function findIdentityByAccessToken($token, $type = null)
    {
        throw new NotSupportedException('"findIdentityByAccessToken" is not implemented.');
    }
    /**
     * Finds user by username
     *
     * @param string $username
     * @return static|null
     */
    public static function findByUsername($username)
    {
        return static::findOne(['username' => $username, 'status' => self::STATUS_ACTIVE]);
    }
    /**
     * Finds user by password reset token
     *
     * @param string $token password reset token
     * @return static|null
     */
    public static function findByPasswordResetToken($token)
    {
        if (!static::isPasswordResetTokenValid($token)) {
            return null;
        }
        return static::findOne([
            'password_reset_token' => $token,
            'status' => self::STATUS_ACTIVE,
        ]);
    }
    /**
     * Finds user by verification email token
     *
     * @param string $token verify email token
     * @return static|null
     */
    public static function findByVerificationToken($token) {
        return static::findOne([
            'verification_token' => $token,
            'status' => self::STATUS_INACTIVE
        ]);
    }
    /**
     * Finds out if password reset token is valid
     *
     * @param string $token password reset token
     * @return bool
     */
    public static function isPasswordResetTokenValid($token)
    {
        if (empty($token)) {
            return false;
        }
        $timestamp = (int) substr($token, strrpos($token, '_') + 1);
        $expire = Yii::$app->params['user.passwordResetTokenExpire'];
        return $timestamp + $expire >= time();
    }
    /**
     * {@inheritdoc}
     */
    public function getId()
    {
        return $this->getPrimaryKey();
    }
    /**
     * {@inheritdoc}
     */
    public function getAuthKey()
    {
        return $this->auth_key;
    }
    /**
     * {@inheritdoc}
     */
    public function validateAuthKey($authKey)
    {
        return $this->getAuthKey() === $authKey;
    }
    /**
     * Validates password
     *
     * @param string $password password to validate
     * @return bool if password provided is valid for current user
     */
    public function validatePassword($password)
    {
        return Yii::$app->security->validatePassword($password, $this->password_hash);
    }
    /**
     * Generates password hash from password and sets it to the model
     *
     * @param string $password
     */
    public function setPassword($password)
    {
        $this->password_hash = Yii::$app->security->generatePasswordHash($password);
    }
    /**
     * Generates "remember me" authentication key
     */
    public function generateAuthKey()
    {
        $this->auth_key = Yii::$app->security->generateRandomString();
    }
    /**
     * Generates new password reset token
     */
    public function generatePasswordResetToken()
    {
        $this->password_reset_token = Yii::$app->security->generateRandomString() . '_' . time();
    }
    public function generateEmailVerificationToken()
    {
        $this->verification_token = Yii::$app->security->generateRandomString() . '_' . time();
    }
    /**
     * Removes password reset token
     */
    public function removePasswordResetToken()
    {
        $this->password_reset_token = null;
    }
}
Kemudian modifikasi file SiteController.php di dalam folder frontend/controller:
<?php
namespace frontend\controllers;
use frontend\models\ResendVerificationEmailForm;
use frontend\models\VerifyEmailForm;
use Yii;
use yii\base\InvalidArgumentException;
use yii\web\BadRequestHttpException;
use yii\web\Controller;
use yii\filters\VerbFilter;
use yii\filters\AccessControl;
use common\models\LoginForm;
use frontend\models\PasswordResetRequestForm;
use frontend\models\ResetPasswordForm;
use common\models\SignupForm;
use frontend\models\ContactForm;
/**
 * Site controller
 */
class SiteController extends Controller
{
    /**
     * {@inheritdoc}
     */
    public function behaviors()
    {
        return [
            'access' => [
                'class' => AccessControl::className(),
                'only' => ['logout', 'signup'],
                'rules' => [
                    [
                        'actions' => ['signup'],
                        'allow' => true,
                        'roles' => ['?'],
                    ],
                    [
                        'actions' => ['logout'],
                        'allow' => true,
                        'roles' => ['@'],
                    ],
                ],
            ],
            'verbs' => [
                'class' => VerbFilter::className(),
                'actions' => [
                    'logout' => ['post'],
                ],
            ],
        ];
    }
    /**
     * {@inheritdoc}
     */
    public function actions()
    {
        return [
            'error' => [
                'class' => 'yii\web\ErrorAction',
            ],
            'captcha' => [
                'class' => 'yii\captcha\CaptchaAction',
                'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
            ],
        ];
    }
    /**
     * Displays homepage.
     *
     * @return mixed
     */
    public function actionIndex()
    {
        return $this->render('index');
    }
    /**
     * Logs in a user.
     *
     * @return mixed
     */
    public function actionLogin()
    {
        if (!Yii::$app->user->isGuest) {
            return $this->goHome();
        }
        $model = new LoginForm();
        if ($model->load(Yii::$app->request->post()) && $model->login()) {
            return $this->goBack();
        } else {
            $model->password = '';

            return $this->render('login', [
                'model' => $model,
            ]);
        }
    }
    /**
     * Logs out the current user.
     *
     * @return mixed
     */
    public function actionLogout()
    {
        Yii::$app->user->logout();

        return $this->goHome();
    }
    /**
     * Displays contact page.
     *
     * @return mixed
     */
    public function actionContact()
    {
        $model = new ContactForm();
        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            if ($model->sendEmail(Yii::$app->params['adminEmail'])) {
                Yii::$app->session->setFlash('success', 'Thank you for contacting us. We will respond to you as soon as possible.');
            } else {
                Yii::$app->session->setFlash('error', 'There was an error sending your message.');
            }

            return $this->refresh();
        } else {
            return $this->render('contact', [
                'model' => $model,
            ]);
        }
    }
    /**
     * Displays about page.
     *
     * @return mixed
     */
    public function actionAbout()
    {
        return $this->render('about');
    }
    /**
     * Signs user up.
     *
     * @return mixed
     */
    public function actionSignup()
    {
        $model = new SignupForm();
        if ($model->load(Yii::$app->request->post()) && $model->signup()) {
            Yii::$app->session->setFlash('success', 'Thank you for registration. Please check your inbox for verification email.');
            return $this->goHome();
        }

        return $this->render('signup', [
            'model' => $model,
        ]);
    }
    /**
     * Requests password reset.
     *
     * @return mixed
     */
    public function actionRequestPasswordReset()
    {
        $model = new PasswordResetRequestForm();
        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            if ($model->sendEmail()) {
                Yii::$app->session->setFlash('success', 'Check your email for further instructions.');

                return $this->goHome();
            } else {
                Yii::$app->session->setFlash('error', 'Sorry, we are unable to reset password for the provided email address.');
            }
        }

        return $this->render('requestPasswordResetToken', [
            'model' => $model,
        ]);
    }
    /**
     * Resets password.
     *
     * @param string $token
     * @return mixed
     * @throws BadRequestHttpException
     */
    public function actionResetPassword($token)
    {
        try {
            $model = new ResetPasswordForm($token);
        } catch (InvalidArgumentException $e) {
            throw new BadRequestHttpException($e->getMessage());
        }
        if ($model->load(Yii::$app->request->post()) && $model->validate() && $model->resetPassword()) {
            Yii::$app->session->setFlash('success', 'New password saved.');

            return $this->goHome();
        }
        return $this->render('resetPassword', [
            'model' => $model,
        ]);
    }
    /**
     * Verify email address
     *
     * @param string $token
     * @throws BadRequestHttpException
     * @return yii\web\Response
     */
    public function actionVerifyEmail($token)
    {
        try {
            $model = new VerifyEmailForm($token);
        } catch (InvalidArgumentException $e) {
            throw new BadRequestHttpException($e->getMessage());
        }
        if ($user = $model->verifyEmail()) {
            if (Yii::$app->user->login($user)) {
                Yii::$app->session->setFlash('success', 'Your email has been confirmed!');
                return $this->goHome();
            }
        }
        Yii::$app->session->setFlash('error', 'Sorry, we are unable to verify your account with provided token.');
        return $this->goHome();
    }
    /**
     * Resend verification email
     *
     * @return mixed
     */
    public function actionResendVerificationEmail()
    {
        $model = new ResendVerificationEmailForm();
        if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            if ($model->sendEmail()) {
                Yii::$app->session->setFlash('success', 'Check your email for further instructions.');
                return $this->goHome();
            }
            Yii::$app->session->setFlash('error', 'Sorry, we are unable to resend verification email for the provided email address.');
        }
        return $this->render('resendVerificationEmail', [
            'model' => $model
        ]);
    }
}
Lakukan proses Signup pada frontend, kemudian setelah selesai lakukan login, baik dalam frontend ataupun backend.
Jika berhasil maka akan tampil gambar seperti dibawah ini:


Membuat Login di Yii2 Advanced

Ketika berhasil Login pada Halaman Frontend. 

Membuat Login di Yii2 Advanced
Jika Berhasil Login pada halaman Backend.

Dalam tutorial ini, kita membuat form login, yang dimana dari kedua halaman tersebut dapat diakses oleh satu username.
Pada tutorial selanjutnya, kita akan mencoba membuat CRUD pada yii2 advanced.
Semoga bermanfaat, terus belajar and good luck.

Rabu, 30 Oktober 2019

Cara Install Framework Yii2

Cara Install Framework Yii2


Bagaimana cara Install Yii2?

Dalam lanjutan tutorial kita sebelumnya https://www.penyaircoding.com/2019/10/mengenal-framework-yii.html kita sudah mengenal apa itu Yii. 
Catatan:
Disaat melakukan Instalasi penulis menggunakan Yii Versi2.
Bisa Menggunakan Composer atau ekstrak Zip.
XAMPP dengan Php Versi 7.0 sebagai web server
Tujuan catatan ini berguna untuk melanjutkan tutorial selanjutnya.
Framework Yii2Dengan catatan tersebut penulis yakin sobat sudah paham apa itu XAMPP dan Composer.
Langkah pertama dalam instalasi yii2, sobat bisa lansung download aplikasinya https://www.yiiframework.com/download , Yii2 sendiri memiliki dua project yaitu basic dan advanced, penulis akan memberikan tutorial bagaimana cara install yii advaced dengan menggunakan Composer, dan Basic dengan ekstrak Zip.

Apa perbedaan amtara Advanced dan Basic pada yii, berikut penjelasan nya:

No Feature Basic Advanced
1 Project structure
2 Site controller
3 User login/logout
4 Forms
5 DB connection
6 Console command
7 Asset bundle
8 Codeception tests
9 Twitter Bootstrap
10 Front- and back-end apps
11 Ready to use User model
12 User signup and password restore
Penjelasan singkat dari tabel diatas adalah sebagi berikut:

  1. Pada advanced template mendukung aplikasi web frontend dan backend. Frontend adalah aplikasi web yang akan di tampilkan untuk end user. Backend adalah aplikasi web yang berfungsi untuk administrator dalam mengelola aplikasi frontend.
  2. Pada Advanced template sudah ada sistem autentikasi user yang siap untuk kita gunakan atau mudahnya, kita/user sudah bisa login dan logout tanpa kita harus membuat programnya. 
  3. Pada Basic template sistem autensikasi user nya sudah ada tapi tanpa database/ pakai kode program saja.
Masuk proses instalasi:
Proses pertama penulis akan melakukan instalasi tempate advanced menggunakan composer.
Buka command prompt, pilih deriktori mana xampp di install lalu masuk ke folder htdocs (C:\xampp\htdocs) lalu copy-paste kode dibawah ini. ( harus tersambung koneksi internet )
php composer.phar create-project yiisoft/yii2-app-advanced advanced
Seperti pada gambar dibawah ini:
Cara Install Framework Yii2
Ketik cd/ pada command prompt kemudian cd/xampp/htdocs, maka akan muncul seperti gambar diatas. Kemudian tekan enter.
Install Framework Yii2
Proses instal yii2 advanced sedang berjalan. Tunggu sampai hasil download selesai.
Jika sudah selesai masuk ke folder htdocs kemudian cari folder advanced. Cari file init.bat klik 2 kali atau bisa klik kanan run administrator. Gambar seperti dibawah ini:
Install Yii2
Pilih 0 untuk developmet kemudian ketik yes lalu enter.
Ketikan http://localhost/advanced/frontend/web/ di web browser sobat maka akan tampil seperti gambar dibawah ini.
Instal Yii2

 Maka Yii2 Advanced berhasil di install, ketikan http://localhost/advanced/backend/web/ di web browser sobat, kemudian bandingkan dengan gambar pada frontend.

Kemudian seperti janji penulis diatas, sekarang kita install template basic pada yii2 dengan mengekstrak ZIP dari hasil download. Download tempale basic disini https://www.yiiframework.com/download, pilih Yii 2 with basic apliaction template seperti gambar dibawah ini.
Framework Yii2
Maka otomatis file terdownload, ekstrak hasil download ke dalam folder htdocs pada XAMPP. Untuk melihat template basic ketik http://localhost/basic/web/. Maka hasil nya akan terlihat seperti gambar dibawa ini:
Framework Yii2
Untuk mengatasi error seperti gambar diatas, sobat bisa cari file web.php didalam folder config, kemudian isi cookieValidationKey dengan ketikan sembarang. Atau bisa Copy-Paste kode dibawah ini:
<?php

$params = require __DIR__ . '/params.php';
$db = require __DIR__ . '/db.php';

$config = [
    'id' => 'basic',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'aliases' => [
        '@bower' => '@vendor/bower-asset',
        '@npm'   => '@vendor/npm-asset',
    ],
    'components' => [
        'request' => [
            // !!! insert a secret key in the following (if it is empty) - this is required by cookie validation
            'cookieValidationKey' => 'jdfhjdhjdthyjdjdgjdtr4325432552',
        ],
        'cache' => [
            'class' => 'yii\caching\FileCache',
        ],
        'user' => [
            'identityClass' => 'app\models\User',
            'enableAutoLogin' => true,
        ],
        'errorHandler' => [
            'errorAction' => 'site/error',
        ],
        'mailer' => [
            'class' => 'yii\swiftmailer\Mailer',
            // send all mails to a file by default. You have to set
            // 'useFileTransport' to false and configure a transport
            // for the mailer to send real emails.
            'useFileTransport' => true,
        ],
        'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
                [
                    'class' => 'yii\log\FileTarget',
                    'levels' => ['error', 'warning'],
                ],
            ],
        ],
        'db' => $db,
        /*
        'urlManager' => [
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => [
            ],
        ],
        */
    ],
    'params' => $params,
];

if (YII_ENV_DEV) {
    // configuration adjustments for 'dev' environment
    $config['bootstrap'][] = 'debug';
    $config['modules']['debug'] = [
        'class' => 'yii\debug\Module',
        // uncomment the following to add your IP if you are not connecting from localhost.
        //'allowedIPs' => ['127.0.0.1', '::1'],
    ];

    $config['bootstrap'][] = 'gii';
    $config['modules']['gii'] = [
        'class' => 'yii\gii\Module',
        // uncomment the following to add your IP if you are not connecting from localhost.
        //'allowedIPs' => ['127.0.0.1', '::1'],
    ];
}

return $config;

Jika sudah, ketikan http://localhost/basic/web/. Maka template basic yii2 sudah berhasil di install.


Di tutorial selanjutnya kita akan membuat login pada Yii2 tempalate advanced.
Sekian semoga artikel ini bermanfaat. Salam Coding.

Cara Install Laravel di Windows

Cara Install Laravel di Windows


Bagaimana Cara install Laravel?

Laravel








Seperti pada umumnya, Laravel merupakan framework MVC.




Model         : Mempresentasikan semua data.
View           : Merupakan representasi keluaran [output] dari suatu model.
Controller   : Komponen yang bertugas mengambil masukan [input] dari user dan mengubah nya menjadi perintah untuk model atau view.
Penulis yakin sobat sudah paham apa itu MVC. Aktifkan web service pada komputer sobat, penulis menggunakan XAMPP dengan versi Php 7.0 untuk pembahasan XAMPP bisa masuk ke sini CaraInstallXAMPP. Pastikan sobat sudah menginstal Composer pada komputer/laptop sobat, untuk pembahasan Composer bisa masuk ke link ini CaraInstallComposer. Untuk mendapatkan versi Laravel sesuai keinginan sobat, sobat bisa masuk ke situs resmi laravel disini https://laravel.com/. Penulis dalam tutorial ini menggunakan laravel dengan versi 5.5
Langkah pertama buka cmd (command prompt).

Ketik seperti berikut
cd/
cd/xampp/htdocs

Perhatikan gambar dibawah ini:
Cara Install Laravel
Langkah selanjutnya ketik kode dibawah ini kemudian enter. 

Ketik seperti berikut dalam cmd kalian.

composer create-project --prefer-dist laravel/laravel laravel "5.5.*"


Cara Install Laravel
Proses Instalasi laravel sedang berjalan, tunggu hingga proses Instalasi selesai. 
Jika proses instalasi laravel telah berhasil, buka folder htdocs dalam XAMPP, maka otomatis terdapat folder laravel.

Buka web browser kalian ketika Url dibawah ini

Ketik seperti berikut dalam web browser kalian.

http://localhost/laravel/public/

Maka hasil dari Url diatas seperti gambar dibawah ini:
Cara Install Laravel

Dengan tampilnya gambar diatas maka laravel berhasil ada install.

Untuk memudahkan sobat dalam memanggil aplikasi laravel dalam web browser, ketikan kode berikut didalan cmd kalian dengan syarat sobat telah masuk kedalam folder laravel, contoh sebagai berikut:

Ketik seperti berikut dalam cmd kalian.

cd/
cd/xampp/htdocs/laravel

Kemudian ketik kode dibawah ini masih didalam cmd

php artisan serve

Cara Install Laravel

Perhatikan gambar diatas pada cmd kalian. Arti dari Laravel development server started: <http://127.0.0.1:8000>, adalah port yang dituju aplikasi, sehinga untuk memanggil aplikasi cukup dengan mengetikan localhost:8000 & tidak perlu memanggil dengan Url yang panjang seperti http://localhost/laravel/public/.

Contoh

Url dibawah sebelum menggunakan php artisan serve

http://localhost/laravel/public/

Url dibawah ini telah menggunakan php artisan serve

http://localhost:8000

Tidak ada perbedaan yang signifikan pada tampilan baik dalam pemanggilan menggunakan port atau tidak, pilih yang paling nyaman dalam pemanggilan aplikasi dalan web server.

Sekian tutorial singkat ini, semoga membantu dan bermanfaat, semangat belajar and good luck .

Cara Install Composer Di Windows

Composer


ComposerBagaimana cara install Composer di windows? Apa itu Composer?

Composer adalah aplikasi package manager untuk bahasa pemrograman PHP yang menyediakan format standar untuk mengelola dependensi PHP dan pustaka-pustaka yang diperlukan. Composer sendiri dikembangkan oleh Nils Adermann dan Jordi Boggiano, yang terus mengelola proyek.

Kenapa harus menggunakan composer ? 
  • Composer membuat kita ngoding PHP lebih terstrukur dengan konsep MVC. 
  • Tidak perlu meng-include semua file php atau class php yang dibutuhkan, sudah ada autoload yang menhandle fungsi tersebut. 
  • Dengan menggunakan packagist, kita dapat menggunakan ribuan package yang sudah ada di composer.
Oke sekarang kita masuk ke pembahasan, dalam tutorial ini penulis menggunakan sistem operasi windows. Langkah pertama download langsung di web nya ya ini link nya Composer, jika sobat bingung cukup pilih  Composer-Setup.exe  dalam web composer kemudian download dan install aplikasi composer.
Buka hasil download dan ikutin cara instal nya seperti pada gambar dibawah ini:
Composer
Ceklis Developer mode kemudian Klik next .
Composer
Pilih direktori install composer, atau bisa langsung klik next.
Composer
Klik next maka proses instalasi berjalan
Composer
Klik next kembali.
Composer
Perhatikan pada Destination location, PHP version. untuk medapatkan versi yang sama sobat bisa download disini XAMPP Php Versi 7.0
Composer
Kemudian klik next.
Composer

Klik finish, maka composer telah berhasil di install.
Apa fungsi dari composer, kita akan praktekan di tutorial install framework yii2 dan laravel.
Sekian dan semoga bermanfaat.

Mengenal Framework Yii

Mengenal Framework Yii

Apa itu Yii, Bagaimana Cara Kerja Framework ini?

Sejarah YII
Dikutip dari [https://jendelaapagi.blogspot.com/]Yii adalah kerangka kerja aplikasi web sumber terbuka berbasis PHP. Nama Yii singkatan dari "Yes It Is!". Seperti juga kerangka kerja PHP pada umumnya, Yii juga telah mengadopsi konsep MVC - Model, View, Controller dalam struktur pemogramanya. Proyek pengembangan Yii dimulai sejak 1 Januari 2008 oleh Qiang Xue programer asal Tiongkok. Pada awalnya Yii dikembangkan menggunakan bahasa kerangka kerja PRADO, setelah mengalami beberapa koreksi dan penyempurnaan kurang lebih setahun, pada 3 Desember 2008, Yii 1.0 secara resmi dirilis ke publik.
Framework YII
Persyaratan
YiiUntuk menjalankan aplikasi Web Berbasis Yii, maka diperlukan Web server yang mendukung 5.1.0. Bagi para developer yang menggunakan Yii, maka wajib mengerti pemrogram berorientasi objek (OOP) sehingga akan sangat membantu dalam membuat project berbasis web, karena Yii meruapakn framework OOP murni.
Yii paling cocok untuk apa?
Yii adalah framework pemrograman umu Web yang bisa dipakai untuk mengembangkan semua jenis aplikasi web. Alasan pertama karena cukup ringan dan dilengkapai dengan mekanisme caching yang canggih. Yii sangat cocok untuk mengembangkan aplikasi dengan proses cepat, seperti portal, forum, e-commerce dan lain-lain.
Bagaimana yii dibandingkan dengan framework lain?
Seperti kebanyakan framework lain, yii adalah MVC framework.

Yii melampaui framework lain dalam hal efisiensi, kekayaan fitur dan kejelasan dokumentasi. Yii bukan berasal dari produk pada beberapa proyek maupun konglomerasi pekerjaan pihak ketiga. Yii adalah hasil dari pengalaman dari para pembuat pada pengembangan aplikasi web dan investigasi framework pemrograman web dan aplikasi yang paling populer.
MVC
Yii mengimplementasikan pola desain model-view-controller, yang disdopsi secara luas dalam pemrograman web. Selain implementasi MVC, Yii juga memperkenalkan frontend dan backend.
Versi
Yii saat ini memiliki dua versi utama yang tersedia: 1.1 dan 2.0. Versi 1.1 adalah generasi lama dan sekarang dalam mode pemeliharaan. Versi 2.0 adalah penulisan ulang lengkap dari Yii, mengadopsi teknologi dan protokol terbaru, termasuk composer, PSR, namespace, trait, dan sebagainya. Versi 2.0 merupakan generasi framework yang sekarang dan terus menerima upaya pengembangan selama beberapa tahun ke depan.

Lalu bagaimana cara install framework Yii?.
Masuk ke Link ini CaraInstallYii

Catatan:
Disaat melakukan Instalasi penulis menggunakan Yii Versi2.
Bisa Menggunakan Composer atau ekstrak Zip.
XAMPP dengan Php Versi 7.0 sebagai web server
Tujuan catatan ini berguna untuk melanjutkan tutorial selanjutnya.

Terus belajar and good luck ..

Selasa, 29 Oktober 2019

#TutorialCodeIgniter #Part1 Menggunakan Controller, View dan Model pada CodeIgniter (ci)

#TutorialCodeIgniter #Part1

Membahas Hal Dasar Tentang Framework CodeIgniter.

CodeIginter Part1 Controller

#TutorialCodeIgniterDalam tutorial kali ini penulis akan membahas hal dasar tentang CodeIgniter dengan cara membuat controller, view, model. Tutorial ini dibuat menjadi 3 bagian (PART1,2,3), penulis berasumsi dengan dibuat perbagian atau part, maka sobat dapat lebih mudah dalam mengenal Controller, View dan Model yang terdapat di CodeIgniter. 
Dalam tutorial ini penulis menggunakan CodeIgniter V3 yang dapat langsung di download disini https://codeigniter.com/download . Jika sudah di download maka ubah nama folder codeIgniter hasil download tadi menjadi belajar_ci .
Untuk memahami framework CodeIgniter, sobat harus paham tentang konsep Model View Controller (MVC) . Apa itu MVC untuk penjelasannya silahkan kunjungi link ini.
CodeIgniter merupakan framework berbasis Model View Controller yang juga merupakan suatu pendekatan dengan memisahkan logika aplikasi dan presentasi. Tutorial kali ini kita akan membahas hal yang dasar dari CodeIgniter, yaitu memahami cara kerja Controller, View dan Model.
  • Controller 
Untuk memahami penggunaan controller, silahkan sobat buat file controllers dengan nama Latihan.php difolder application/controllers, dan isi dengan kode/skrip berikut.

<?php
class Latihan extends CI_Controller {
 public function index()
 {
  echo 'Apa Kabar Sobat?';
 }
}
Perhatikan pada class Latihan extends Skrip tersebut merupakan  nama kelas yang penulisannya harus sama dengan nama controller yang menampilkan teks "Apa Kabar Sobat?". Sedangkan pada baris ke tiga yaitu public function index(), kode tersebut memeliki arti bahwa skrip echo 'Apa Kabar Sobat?'; dijalankan pada controller Latihan dengan method adalah index. Untuk melihat hasilnya ketikan skrip dibawah ini di browser kalian.

http://localhost/belajar_ci/index.php/latihan
Maka hasil dari skrip diatas seperti pada gambar dibawah ini.

#TutorialCodeIgniter

Sedikit membahas tentang View pada CodeIgniter, view tidak bisa dijalankan secara langsung melainkan harus dimuat dari controller. Penulis menyarankan pahami cara kerja controller sebelum menggunakan view. Jika sudah paham silahkan masuk link #TutorialCodeIgniter#Part2 untuk mengenal cara kerja view.
Oke sekian dalam tutorial Controller, View dan Model Part1.
Semangat belajar and good luck ...

#TutorialCodeIgniter #Part2 Menggunakan Controller, View dan Model pada CodeIgniter (ci)

#TutorialCodeIgniter #Part2

Membahas Hal Dasar Tentang Framework CodeIgniter.

CodeIginter Part2 View

#TutorialCodeIgniter
Dalam tutorial part1 #TutorialCodeIgniter#Part1, kita telah membahas cara kerja controller pada CodeIgniter dan penulis sangat yakin sobat sudah paham dengan cara kerja controller pada CodeIgniter. Oke saatnya masuk ke pembahasan.




  • View
Untuk memuat view bisa menggunakan metode berikut :

 $this->load->view('namaview');

Sekarang buka controller Latihan.php yang telah dibuat sebelumnya di tutorial part1 ganti echo 'Apa Kabar Sobat?'; menjadi $this->load->view('latihan/viewlatihan'); seperti contoh skrip dibawah ini:
<?php
class Latihan extends CI_Controller {
 public function index()
 {
  $this->load->view('latihan/viewlatihan');
 }
}
Sekarang buat file view dengan nama viewlatihan.php dalam folder application/views/latihan. ketikan skrip berikut, atau copy-paste skrip dibawah ini.
<!DOCTYPE html>
<html>
<head>
 <title>Ini Contoh View</title>
</head>
<body>
 <center><h1>Ini Contoh View </h1></center>
</body>
</html>
Contoh diatas menunjukan bahwa pada saat aplikasi dijalankan, maka controller akan memuat file viewlatihan.php yang ada di folder view/latihan. Silahkan ketik atau copy-paste skirp dibawah ini dan jalankan pada browser sobat.
http://localhost/belajar_ci/index.php/latihan
Maka hasil dari skrip diatas (viewlatihan.php) seperti pada gambar dibawah ini.
#TutorialCodeIgniter

Uraian diatas menjelaskan bagaimana menampilkan atau memuat view dari controller dengan index sebagai class function atau method. Satu controller bisa terdiri dari banyak method, untuk lebih jelas nya ketik atau copy-paste skrip dibawah ini dibawah method index.
public function kedua()
{
 echo 'Fungsi Kedua';
}
Sehingga skrip yang ada pada controller Latihan.php menjadi seperti berikut.
<?php
class Latihan extends CI_Controller {
 public function index()
 {
  $this->load->view('latihan/viewlatihan');
 }
 public function kedua()
 {
  echo 'Fungsi Kedua';
 }
}
Silahkan ketik dibrowser http://localhost/belajar_ci/index.php/latihan/kedua
Maka hasilnya seperti gambar dibawah ini.
#TutorialCodeIgniter

Bagiamana mudah bukan, tetap semangat dan terus belajar.
Di Part3 #TutorialCodeIgniter#Part3 kita akan membahas Model dalam CodeIgniter.

#TutorialCodeIgniter #Part3 Menggunakan Controller, View dan Model pada CodeIgniter (ci)

#TutorialCodeIgniter #Part3

Membahas Hal Dasar Tentang Framework CodeIgniter.

CodeIginter Part3 Model


  • Model
#TutorialCodeIgniter
Model merupakan PHP classes yang memiliki fungsi untuk berinteraksi dengan database, mengubah, menghapus dan lain-lain. Model terletak di direktori aplication/models/ ataupun subdirektori. Dalam penamaan kelas model, pada huruf pertama haruslah huruf besar/kapital dan harus sama dengan nama model itu sendiri. Berikut adalah contoh penamaan kelas model dari file aplication/models/Latihan_model.php.
class Latihan_model extends CI_model{
}
Dalam penggunaannya, model bisa dimuat/dipanggil melalui controller. Contoh untuk memanggil ModelCi.php bisa menggunakan fungsi berikut:
$this->load->model('modelci');
Uraian skrip diatas adalah cara penamaan dan pemanggilan model dari controller. Lalu bagaimana cara membuat file dalam direktori models. Oke masuk ke pembahasan.
Sudah kita singgung sebelumnya, bahwa model akan berinteraksi dengan database, maka kita buat database db_belajar. Kemudian setelah itu jalankan query berikut di salah satu aplikasi database client yang sobat gunakan.

CREATE TABLE `db_belajar`.`identitas` ( `id` INT NOT NULL , `nama` VARCHAR(35) NOT NULL , `alamat` VARCHAR(255) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;
kemudian
INSERT INTO `identitas` (`id`, `nama`, `alamat`) VALUES ('1', 'Mugiwara', 'Wano'), ('2', 'Zoro', 'Wano')

Kemudian cari file database.php dalam folder config seperti pada gambar dibawah ini :
#TutorialCodeIgniter
Ketikan db_belajar pada database, seperti pada gambar diatas.
Ketik skrip dibawah ini atau copy-paste, kemudian simpan dengan nama ModelCi.php kedalam folder models.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class ModelCi extends CI_Model{
    public function GetIdentitas(){
        $data = $this->db->query("SELECT * FROM identitas");
        return $data->result_array();
    }
}
?>
Kemudian buat file didalam folder controller simpan dengan nama Latihan_model.php. Ketik atau copy-paste skrip dibawah ini.
<?php
class Latihan_model extends CI_Controller {
 public function index(){
  $this->load->model('modelci');
   $data = $this->modelci->GetIdentitas();
 foreach ($data as $identitas) {
            echo "Nama : ".$identitas['nama']."<br/>";
            echo "Alamat : ".$identitas['alamat']."<hr/>";
  }
 }
}

Setelah berhasil membuat file model dan controller tersebut, maka langkah terakhir adalah menjalankan di browser, ketik atau copy-paste url dibawah ini

http://localhost/belajar_ci/index.php/latihan_model
Jika langkahnya sudah benar maka akan keluar tampilan seperti gambar dibawah ini.
#TutorialCodeIgniter

Dengan ini maka tutorial berepisode ini telah berakhir, tutorial ini masih pengenalan dasar, next tutorial penulis akan membuat tutorial bagimana cara membuat web dengan CodeIgniter yang siap publish.
Sekian, selamat mencoba dan belajar and good luck .

Senin, 28 Oktober 2019

CodeIgniter | Apa itu CodeIgniter? Bagaimana Cara Install CodeIgniter

Bagaimana Cara Install Framework CodeIgniter, Apa itu CodeIgniter?

Tentang CodeIgniter.


Versi
Framework CodeIgniter telah dirilis sejak tanggal 28 Februari 2006 dengan versi pertama yaitu Beta 1.0 , dan sampai saat ini telah mengalami banyak penyempurnaan dari tahun ke tahun.

Kebutuhan Server
Pada website resmi nya, Codeigniter direkomendasikan PHP 5.6 atau lebih baru. Sedangkan database bisa menggunakan MySQl, MariaDB, PostgreSQL dan lain-lain. Dalam tulisan ini, penulis menggunakan XAMPP dengan versi PHP 7.0 dan MariaDB untuk Database.


Kelebihan CodeIgniter


  • Performa bisa dikatakan cepat karena framework Codeigniter tidak menggunakan template engine dan ORM yang dapat memperlambat kinerja dari proses.

Kekurangan CodeIgniter

  • CodeIgniter dirasa kurang pas untuk pembuatan web dengan skala besar. [Memang mau sebesar apa?]
  • Library yang terbatas.

Lantas bagimana cara install CodeIgniter? 
Untuk melakukan instalasi codeigniter cukup mudah, yaitu dengan langkah seperti berikut:

  • Download file CodeIgniter langsung dari web resminya, yaitu https://codeigniter.com/download. Lalu pilih CodeIgniter 3.
  • Ekstrak file yang telah di download ke DocumentRoot web yang sobat gunakan, dalam tulisan ini penulis menggunakan XAMPP untuk cara install XAMPP sobat bisa masuk link ini Cara install XAMPP. Ganti nama folder hasil ekstrak file download menjadi belajar_ci. Untuk mengganti nama folder bukanlah suatu hal yang wajib, namun dalam tulisan ini penulis mengganti dengan belajar_ci yang akan berhubungan dengan tutorial selanjutnya.
  • Jika langkah diatas sudah benar, maka sobat bisa mengakses website dengan url http://localhost/belajar_ci/, dengan tampilan seperti dibawah ini.




Dengan demikian sobat berhasil menginstal CodeIgniter.
Ternyata sangat mudah, Selanjutnya kita akan bahas tentang MVC pada CodeIniter.
Sekian, semangat dan terus belajar ...

Tutorial CodeIgniter Lainya
CodeIgniter Part 1 : Menggunakan Controller, View dan Model pada CodeIgniter Part 1
CodeIgniter Part 2 : Menggunakan Controller, View dan Model pada CodeIgniter Part 2
CodeIgniter Part 3 : Menggunakan Controller, View dan Model pada CodeIgniter Part 3

Sabtu, 26 Oktober 2019

Mengenal Bahasa Pemrograman PHP

Apa itu PHP? Apa fungsi PHP? Yuk simak.

PHP atau panjangnya Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memprogram situs web dinamis. Kemudahan dan kepopuleran PHP sudah menjadi standar bagi programmer web di seluruh dunia. Menurut wikipedia pada februari 2014, sekitar 82% dari web server di dunia menggunakan PHP. PHP juga menjadi dasar dari aplikasi CMS (Content Management System) populer seperti Joomla, Drupal, dan juga WordPress.
Fungsi PHP dalam pemrograman berbasis web.
Pemrograman PHPUntuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang terbilang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja (tapi hanya dalam bentuk halaman tanpa fungsi). PHP secara dasar berfungsi untuk menampikan data dari database kemudian ditampilkan dengan menggunakan web browser yang sebelumnya telah dibungkus oleh HTML. Web yang menarik dapat dihasilkan dengan HTML dan CSS dan dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.
Bagaimana cara membuat file yang berekstensi PHP dan apa perbedaannya dengan HTML?
Sebagai contoh penggunaan PHP, mudahnya seperti ini, contoh kita ingin membuat list dari nomor 1 hingga nomor 5. Dengan menggunakan HTML murni, kita bisa membuatnya secara manual seperti code berikut ini.
<!DOCTYPE html>
<html>
   <head>
      <title>Contoh membuat list dengan HTML</title>
   </head>
<body>
<h1>Belajar HTML</h1>
   <ul>
      <li>List ke-1</li>
      <li>List ke-2</li>
      <li>List ke-3</li>
      <li>List ke-4</li>
      <li>List ke-5</li>
   </ul>
</body>
</html>
Ketika kita mencoba membuat code di atas maka hasil nya seperti gambar dibawah berikut.
Gambar diatas merupakan contoh menggunakan HTML murni.
Halaman HTML tersebut dapat dibuat dengan mudah dengan cara copy-paste tag <li> sebanyak 5 kali dan mengubah sedikit angka-angka pada nomor urut di belakangnya. Namun jika yang kita inginkan adalah menambahkan list tersebut menjadi 50 atau 5000 list, cara copy-paste tersebut menjadi tidak efektif. Jika sobat menggunakan PHP, kita tinggal membuat perulangan for sebanyak 5000 kali dengan perintah yang lebih singkat seperti berikut ini.
<!DOCTYPE html>
<html>
   <head>
      <title>Contoh list dengan PHP</title>
   </head>
<body>
<h1>Belajar PHP</h1>
   <ul>
      <?php
      for ($i= 1; $i <= 5000; $i++) 
         {
            echo "<li>list ke-$i</li>";
         }
      ?>
   </ul
</body>
</html>
Simpan file diatas dengan nama index.php kemudian save di web server kalian (Apache, XAMPP) buat folder baru dengan nama belajarcoding kemudian save file didalam folder tersebut. Apa itu Web Server? Baca disini .
Maka hasil dari code diatas menjadi seperti gambar dibawah ini.
Pemrograman PHP
Gambar diatas merupakan contoh menggunakan PHP.

PHP tidak hanya dapat melakukan pengulangan tersebut, masih banyak hal lain yang bisa kita lakukan dengan PHP, seperti menginput data ke database, menghasilkan gambar, menkonversi halaman text menjadi PDF, management cookie dan session.

Sekian pembahasan tentang bahasa pemorgraman PHP, semangat terus untuk belajar and good luck ..

Jumat, 25 Oktober 2019

Daftar Link Download Tema BLOG SEO Friendly

Memilih template BLOG ternyata memang susah-susah gampang, mengikuti sesuai keinginan, fast loading dan yang pasti SEO friendly, lalu apa saja ciri-ciri tema BLOG yang sesuai kriteria sahabat BLOGGER?
Kita bahas satu persatu .
1. Cepat dan ringan.
Kecepatan halaman pada BLOG menjadi salah satu faktor SEO. BLOG dengan loading lama,      lambat, berat, akan mendapatkan nilai buruk dari Google, sehingga BLOG akan sulit muncul di halaman pertama hasil pencarian.

2. Mobile Friendly
Template yang membuat BLOG mudah diakses atau kompatibel di perangkat apa pun, baik komputer desktop maupun mobile kian penting karana mayoritas pengguna mengakses internet via HP.

3. Navigasi
Navigasi yang baik juga ditunjukkan dengan adanya breadcrumbs, yaitu internal link di atas judul tulisan, terdiri dari link ke halaman depan (home), halaman label, dan judul tulisan. Navigasi sangat penting pada sebuah BLOG, bukan hanya mempermudah pengunjung melihat BLOG sahabat, tapi juga mempengaruhi SEO.

4. Heading
Pastikan BLOG sahabat menggunakan heading tags (h1), selain berfungsi untuk SEO, heading tags juga memperjelas judul pada BLOG sahabat.
Setelah panjang lebar melihat ciri-ciri tema BLOG yang SEO Friendly, yuk coba intip daftar link tema apa saja yang dirasa cocok untuk sahabat BLOGGER.

1. SEO Optima Blogger Template
Tema BLOG SEO Friendly
Tema BLOG ini sangat baik dalam masalah fast loading, SEO Friendly jika sahabat ingin mencoba nya bisa langsung masuk ke situs tema BLOG satu ini di sini .

2. MASY Blogger Template
Tema BLOG SEO Friendly
Jika dirasa sahabat BLOGGER tertarik dengan tema MASY seperti gambar diatas, tersedia free dan premium, jika tertarik yuk intip situs nya di sini .

3. VioMagz Template
Tema BLOG SEO Friendly
Siapa yang tidak kenal dengan pengembang dari template yang satu ini, tidak usah panjang lebar, jika tertarik sahabat BLOGGER semua bisa intip langsung di sini .

Semoga dari pembahasan dan pastinya link download tema BLOG yang sudah di share, dapat membantu sahabat dalam mewujudkan semua keinginan terbaik untuk memelihara BLOG sobat.

Sekian dari kami semoga bermanfaat, good luck ...

Kamis, 24 Oktober 2019

Cara Membuat Menu Dropdown di BLOG

Menu dropdown pada BLOG.
Mungkin diluar sana banyak tutorial bagaimana cara membuat menu dropdown untuk BLOG, oke no problem siapa tau tutorial yang kita buat disini ternyata yang membantu para BLOGGER untuk memperindah tampilan BLOG nya.
Kita ke pembahasan, masuk dalam menu TEMA kemudian pilih EDIT HTML.
Menu Dropdown di BLOG
Jika sudah masuk kedalam halaman Edit HTML cari code berikut ]]></b:skin> bisa menggunakan fungsi CTRL+F. kemudian langsung aja copy-paste code dibawah ini diatas code ]]></b:skin>.
#menutop ul,
#menutop li,
#menutop span,
#menutop a {
  margin: 0;
  padding: 0;
  position: relative;
}
#menutop {
  height: 49px;
  background: #D5D5D5;
  border-bottom: 4px solid #59c5ff;
  width: auto;
}
#menutop:after,
#menutop ul:after {
  content: '';
  display: block;
  clear: both;
}
#menutop a {
  background: #D5D5D5;
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#menutop ul {
  list-style: none;
}
#menutop > ul,#menutop > ul > li {
  float: left;
}
#menutop > ul > li > a {
  color: #000;
  font-size: 12px;
}
#menutop > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
  background: #ececec;
}
#menutop .menu-sub {
  z-index: 1;
}
#menutop .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#menutop .menu-sub ul li {
  margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
  background: #59c5ff;
  border-bottom: 1px solid #8cd7ff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
  background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub .menu-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
  background: #26b3ff;
  border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
  background: #0daaff;
} 
Pertanyaan nya kenapa kita harus masuk ke edit HTML, kan seharusnya di BLOG sendiri itu ada cara untuk membuat menu bar? Jawabannya karena kita ingin tampilan BLOG yang kita punya adalah hasil dari imajinasi kita sendiri.

Baca Juga --> Cara Membuat Headline Breaking News Pada Blog

Masih di dalam Edit HTML, sekarang cari kode </header> , copy-paste code dibawah ini tepat diatas code </header> .
<div id='menutop'>
<ul>
   <li class='active'><a href='#' target='_blank'><span>Home</span></a></li>
   <li class='menu-sub'><a href='#'><span>Menu</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>Menu</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>Menu 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
       <li class='menu-sub'><a href='#'><span>Menu 3</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>Menu 3</span></a>
            <ul>
               <li><a href='#'><span>Sub Menu </span></a></li>
               <li class='last'><a href='#'><span>Sub Menu </span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>Menu 4</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>
Sekarang menu dropdown telah berhasil kita buat. Sedikit tambahan, ganti code # menjadi link BLOG kalian dan didalam code <span></span> ganti menjadi nama menu kalian, contoh: <li class='menu-sub'><a href='https://penyaircoding.blogspot.com/'><span>penyaircoding</span></a>

Oke selamat mencoba, good luck...