Skip to content

Commit b791085

Browse files
brayanestevesbrayanesteves
committed
✔️MVC (Basic)✔️ - View & Layout
1 parent 307a239 commit b791085

File tree

19 files changed

+384
-2
lines changed

19 files changed

+384
-2
lines changed

‎application/Config.php

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
1-
<?php
1+
<?php
2+
/**
3+
* It is to include files from the 'views' side
4+
* 'User side'
5+
*/
6+
define('BASE_URL', 'http://localhost/mvc-phpv7/');
27
/**
38
* This constant will mean the default controller of the application
49
* In case no controller is sent in the URL, it will request the 'index' controller
510
* And if we want to change a default value, we change the 'index' values
611
*/
712
define('DEFAULT_CONTROLLER', 'index');
13+
14+
/**
15+
* Is folder 'layout' directory 'views'
16+
*/
17+
define('DEFAULT_LAYOUT', 'default');
18+
19+
/**
20+
* ===========================
21+
* ===========================
22+
*/
23+
define('APP_NAME', 'Halcón Bit');
24+
define('APP_SLOGAN', 'Наука — это весело, наслаждайся ею.');
25+
define('APP_COMPANY', 'Halcón Bit');
826
?>

‎application/Controller.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<?php
22
abstract class Controller {
3+
protected $_view;
4+
5+
public function __construct() {
6+
$this->_view = new View(new Request);
7+
}
38
/**
49
* This abstract method forces all classes that inherit from 'Controller'
510
* to implement an 'index' method, even if it has no code.

‎application/View.php

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?php
2+
/**
3+
*
4+
*/
5+
class View {
6+
private $_controller;
7+
8+
/**
9+
* @param $request is 'application/Request.php'
10+
*/
11+
public function __construct(Request $request) {
12+
$this->_controller = $request->getController();
13+
}
14+
15+
/**
16+
* @param $view
17+
* @param $item
18+
*/
19+
public function render($view, $item = false) {
20+
21+
$menu = array(
22+
array('Rfrnc' => 'index', 'title' => 'Home', 'link' => BASE_URL),
23+
array('Rfrnc' => 'about', 'title' => 'About', 'link' => BASE_URL . 'about'),
24+
);
25+
26+
$_layoutParams = array(
27+
'root_css' => BASE_URL . 'views/layouts/' . DEFAULT_LAYOUT . '/assets/css/',
28+
'root_img' => BASE_URL . 'views/layouts/' . DEFAULT_LAYOUT . '/assets/img/',
29+
'root_js' => BASE_URL . 'views/layouts/' . DEFAULT_LAYOUT . '/assets/js/',
30+
'menu' => $menu
31+
);
32+
/**
33+
*
34+
*/
35+
$rootView = ROOT . 'views' . DS . $this->_controller . DS . $view . '.phtml';
36+
37+
if(is_readable($rootView)) {
38+
include_once ROOT . 'views' . DS . 'layouts' . DS . DEFAULT_LAYOUT . DS . 'header.php';
39+
include_once $rootView;
40+
include_once ROOT . 'views' . DS . 'layouts' . DS . DEFAULT_LAYOUT . DS . 'footer.php';
41+
} else {
42+
throw new Exception('Error view');
43+
}
44+
45+
46+
}
47+
}
48+
?>

‎controllers/aboutController.php

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?php
2+
class aboutController extends Controller {
3+
public function __construct() {
4+
parent::__construct();
5+
}
6+
7+
public function index() {
8+
$this->_view->title = 'About';
9+
$this->_view->render('index', 'about');
10+
}
11+
}
12+
?>

‎controllers/indexController.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<?php
22
class indexController extends Controller {
3+
public function __construct() {
4+
parent::__construct();
5+
}
6+
37
public function index() {
4-
echo "Hello from 'Controller/indexController.php'";
8+
$this->_view->title = 'Front page';
9+
$this->_view->render('index', 'index');
510
}
611
}
712
?>

‎index.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Landing Page With Light/Dark Mode</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<main>
12+
<div class="big-wrapper light">
13+
<img src="./img/shape.png" alt="" class="shape" />
14+
15+
<header>
16+
<div class="container">
17+
<div class="logo">
18+
<img src="./img/logo.png" alt="Logo" />
19+
<h3>Danvo in a new branch</h3>
20+
</div>
21+
22+
<div class="links">
23+
<ul>
24+
<li><a href="#">Features</a></li>
25+
<li><a href="#">Pricing</a></li>
26+
<li><a href="#">Testimonials</a></li>
27+
<li><a href="#" class="btn">Sign up</a></li>
28+
</ul>
29+
</div>
30+
31+
<div class="overlay"></div>
32+
33+
<div class="hamburger-menu">
34+
<div class="bar"></div>
35+
</div>
36+
</div>
37+
</header>
38+
39+
<div class="showcase-area">
40+
<div class="container">
41+
<div class="left">
42+
<div class="big-title">
43+
<h1>Future is here,</h1>
44+
<h1>Start Exploring now.</h1>
45+
</div>
46+
<p class="text">
47+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
48+
Delectus eius distinctio odit, magni magnam qui ex perferendis
49+
vitae!
50+
</p>
51+
<div class="cta">
52+
<a href="#" class="btn">Get started</a>
53+
</div>
54+
</div>
55+
56+
<div class="right">
57+
<img src="./img/person.png" alt="Person Image" class="person" />
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div class="bottom-area">
63+
<div class="container">
64+
<button class="toggle-btn">
65+
<i class="far fa-moon"></i>
66+
<i class="far fa-sun"></i>
67+
</button>
68+
</div>
69+
</div>
70+
</div>
71+
</main>
72+
73+
<!-- JavaScript Files -->
74+
75+
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
76+
<script src="./app.js"></script>
77+
</body>
78+
</html>

‎views/about/assets/css/styles.css

Whitespace-only changes.

‎views/about/assets/js/main.js

Whitespace-only changes.

‎views/about/index.phtml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h2>About</h2>

‎views/index/assets/css/styles.css

Whitespace-only changes.

‎views/index/assets/js/main.js

Whitespace-only changes.

‎views/index/index.phtml

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<main>
2+
<div class="big-wrapper light">
3+
<img src="<?php echo $_layoutParams['root_img']; ?>png/shape.png" alt="" class="shape" />
4+
5+
<header>
6+
<div class="container">
7+
<div class="logo">
8+
<img src="<?php echo $_layoutParams['root_img']; ?>png/logo.png" alt="Logo" />
9+
<h3>Danvo in a new branch</h3>
10+
</div>
11+
12+
<div class="links">
13+
<ul>
14+
<?php if(isset($_layoutParams['menu'])): ?>
15+
<?php for($i = 0; $i < count($_layoutParams['menu']); $i++): ?>
16+
<?php
17+
if($item && $_layoutParams['menu'][$i]['Rfrnc'] == $item) {
18+
$_item_style = 'current';
19+
} else {
20+
$_item_style = '';
21+
}
22+
?>
23+
<li id="<?php echo $_item_style; ?>"><a href="<?php echo $_layoutParams['menu'][$i]['link']; ?>"><?php echo $_layoutParams['menu'][$i]['title']; ?></a></li>
24+
<?php endfor; ?>
25+
<?php endif; ?>
26+
<li><a href="#" class="btn">Sign up</a></li>
27+
</ul>
28+
</div>
29+
30+
<div class="overlay"></div>
31+
32+
<div class="hamburger-menu">
33+
<div class="bar"></div>
34+
</div>
35+
</div>
36+
</header>
37+
38+
<div class="showcase-area">
39+
<div class="container">
40+
<div class="left">
41+
<div class="big-title">
42+
<h1>Future is here,</h1>
43+
<h1>Start Exploring now.</h1>
44+
</div>
45+
<p class="text">
46+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
47+
Delectus eius distinctio odit, magni magnam qui ex perferendis
48+
vitae!
49+
</p>
50+
<div class="cta">
51+
<a href="#" class="btn">Get started</a>
52+
</div>
53+
</div>
54+
55+
<div class="right">
56+
<img src="<?php echo $_layoutParams['root_img']; ?>png/person.png" alt="Person Image" class="person" />
57+
</div>
58+
</div>
59+
</div>
60+
61+
<div class="bottom-area">
62+
<div class="container">
63+
<button class="toggle-btn">
64+
<i class="far fa-moon"></i>
65+
<i class="far fa-sun"></i>
66+
</button>
67+
</div>
68+
</div>
69+
</div>
70+
</main>

‎views/layouts/default/assets/css/styles.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
2+
.light { --mainColor: #64bcf4; --hoverColor: #5bacdf; --backgroundColor: #f1f8fc; --darkOne: #312f3a; --darkTwo: #45424b; --lightOne: #919191; --lightTwo: #aaa; }
3+
.dark { --mainColor: #64bcf4; --hoverColor: #5bacdf; --backgroundColor: #192e3a; --darkOne: #f3f3f3; --darkTwo: #fff; --lightOne: #ccc; --lightTwo: #e7e3e3; }
4+
*,
5+
*::before,
6+
*::after { padding: 0; margin: 0; box-sizing: border-box; }
7+
body { font-family: "Poppins", sans-serif; }
8+
.stop-scrolling { height: 100%; overflow: hidden; }
9+
img { width: 100%; }
10+
a { text-decoration: none; }
11+
.big-wrapper { position: relative; padding: 1.7rem 0 2rem; width: 100%; min-height: 100vh; overflow: hidden; background-color: var(--backgroundColor); display: flex; flex-direction: column; justify-content: space-between; }
12+
.container { position: relative; max-width: 81rem; width: 100%; margin: 0 auto; padding: 0 3rem; z-index: 10; }
13+
header { position: relative; z-index: 70; }
14+
header .container { display: flex; justify-content: space-between; align-items: center; }
15+
.overlay { display: none; }
16+
.logo { display: flex; align-items: center; cursor: pointer; }
17+
.logo img { width: 40px; margin-right: 0.6rem; margin-top: -0.6rem; }
18+
.logo h3 { color: var(--darkTwo); font-size: 1.55rem; line-height: 1.2; font-weight: 700; }
19+
.links ul { display: flex; list-style: none; align-items: center; }
20+
.links a { color: var(--lightTwo); margin-left: 4.5rem; display: inline-block; transition: 0.3s; }
21+
.links a:hover { color: var(--hoverColor); transform: scale(1.05); }
22+
.btn { display: inline-block; padding: 0.9rem 1.9rem; color: #fff !important; background-color: var(--mainColor); border-radius: 16px; text-transform: capitalize; transition: 0.3s; }
23+
.btn:hover { background-color: var(--hoverColor); transform: scale(1) !important; }
24+
.hamburger-menu { position: relative; z-index: 99; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; display: none; }
25+
.hamburger-menu .bar { position: relative; width: 100%; height: 3px; background-color: var(--darkTwo); border-radius: 3px; transition: 0.5s; }
26+
.bar::before,
27+
.bar::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: var(--darkTwo); border-radius: 3px; transition: 0.5s; }
28+
.bar::before { transform: translateY(-8px); }
29+
.bar::after { transform: translateY(8px); }
30+
.big-wrapper.active .hamburger-menu .bar { background-color: transparent; }
31+
.big-wrapper.active .bar::before { transform: translateY(0) rotate(-45deg); }
32+
.big-wrapper.active .bar::after { transform: translateY(0) rotate(45deg); }
33+
.showcase-area .container { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; justify-content: center; }
34+
.big-title { font-size: 1.4rem; color: var(--darkOne); text-transform: capitalize; line-height: 1.4; }
35+
.text { color: var(--lightOne); font-size: 1.1rem; margin: 1.9rem 0 2.5rem; max-width: 600px; line-height: 2.3; }
36+
.showcase-area .btn { box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.05); }
37+
.person { width: 123%; transform: translate(15%, 25px); }
38+
.toggle-btn { display: inline-block; border: none; background: var(--darkTwo); color: var(--backgroundColor); outline: none; cursor: pointer; height: 39px; width: 39px; border-radius: 50%; font-size: 1.1rem; transition: 0.3s; }
39+
.toggle-btn i { line-height: 39px; }
40+
.toggle-btn:hover { background: var(--mainColor); }
41+
.big-wrapper.light .toggle-btn i:last-child { display: none; }
42+
.big-wrapper.light .toggle-btn i:first-child { display: block; }
43+
.big-wrapper.dark .toggle-btn i:last-child { display: block; }
44+
.big-wrapper.dark .toggle-btn i:first-child { display: none; }
45+
.shape { position: absolute; z-index: 0; width: 500px; bottom: -180px; left: -15px; opacity: 0.1; }
46+
.copy { position: absolute; top: 0; left: 0; z-index: 100; animation: appear 1s 1 both; }
47+
48+
@keyframes appear {
49+
0% { clip-path: circle(30% at -25% -25%); }
50+
100% { clip-path: circle(150% at 0 0); }
51+
}
52+
53+
@media screen and (max-width: 870px) {
54+
.hamburger-menu { display: flex; }
55+
.links { position: fixed; top: 0; right: 0; max-width: 450px; width: 100%; height: 100%; background-color: var(--mainColor); z-index: 95; display: flex; align-items: center; justify-content: center; transform: translateX(100%); transition: 0.5s; }
56+
.links ul { flex-direction: column; }
57+
.links a { color: #fff; margin-left: 0; padding: 2rem 0; }
58+
.links .btn { background: none; }
59+
.overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; transition: 0.5s; }
60+
.big-wrapper.active .links { transform: translateX(0); box-shadow: 0 0 50px 2px rgba(0, 0, 0, 0.4); }
61+
.big-wrapper.active .overlay { pointer-events: all; opacity: 1; }
62+
.showcase-area { padding: 2.5rem 0; max-width: 700px; margin: 0 auto; }
63+
.showcase-area .container { grid-template-columns: 1fr; justify-content: center; grid-gap: 2rem; }
64+
.big-title { font-size: 1.1rem; }
65+
.text { font-size: 0.95rem; margin: 1.4rem 0 1.5rem; }
66+
.person { width: 100%; transform: none; }
67+
.logo h3 { font-size: 1.25rem; }
68+
.shape { bottom: -180px; left: -150px; }
69+
}
70+
71+
@media screen and (max-width: 470px) {
72+
.container { padding: 0 1.5rem; }
73+
.big-title { font-size: 0.9rem; }
74+
.text { margin: 1.1rem 0 1.5rem; }
75+
.showcase-area .btn { font-size: 0.8rem; }
76+
}

‎views/layouts/default/assets/img/png/logo.png

8.43 KB
Loading

‎views/layouts/default/assets/img/png/person.png

2.66 MB
Loading

‎views/layouts/default/assets/img/png/shape.png

30.9 KB
Loading

0 commit comments

Comments
 (0)