<?php
//routes/index/login.php
$f3->route('GET /login', function($f3){
    require_once __DIR__ . '/../../controllers/login.php';
    login($f3);
});

$f3->route('POST /login', function($f3){
    echo 'POST Login';
});

 

<?php
//controllers/login.php

function login($f3){
    require_once __DIR__ . '/../setting.php';

    $f3->mset([
        'appName'=>$setting['siteTitle'], 
        'title'=>'ទំព័រ​ដើម', 
        'date'=>$setting['date'],
        'message'=>$setting['message']
    ]);

    $view=new View;
    echo $view->render('views/login.php');
}

 

<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title><?php echo $appName." - ".$title; ?></title>
        <script src="<?php echo $BASE ?>/public/scripts/jQuery.js"></script>
        <link href="<?php echo $BASE ?>/public/fonts/setup.css" rel="stylesheet" ></link>
        <link href="<?php echo $BASE ?>/public/images/site_logo.png" rel="icon" ></link>
        <link href="<?php echo $BASE ?>/public/styles/global.css" rel="stylesheet"></link>
        <link href="<?php echo $BASE ?>/public/styles/login.css" rel="stylesheet"></link>
    </head>
    <body>
        <div class='Login'>
            <div class='title'>ចុះ​ឈ្មោះ​ចូល​ទំព័រ​គ្រប់គ្រង</div>
            <form action='<?php echo $BASE ?>/login' method="post" >
                <span>Email: </span><input type='email' name='email' required />
                <span>ពាក្យ​សំងាត់: </span><input type='password' name='password' required />
                <span></span><input type='submit' value='បញ្ជូន' />
                <span></span><div class='info'><?php echo $message ?></div>
            </form>
        </div>
    </body>
</html>

 

.Login{
    width: 400px;
    margin: 60px auto;
    background: var(--background);
    color: white;
    
}

.Login .title{
    font: 18px/1.5 Oswald, Moul;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid white;
}

.Login form{
    padding: 20px;
    display: grid;
    grid-template-columns: 20% auto;
    grid-gap: 5px;
    align-items: center;
}

.Login form span{
    text-align: right;
}

.Login form input{
    font: var(--body-font);
    padding: 0 10px;
}

 

GitHub: https://github.com/Sokhavuth/multimedia_

Heroku: https://khmerweb-multimedia1.herokuapp.com/