0
0

Added templating, added sessions

Added templating to the one page app, added and configured sessions to remember the last position and stored sessions for one day, even after browser close.
This commit is contained in:
Bryan Pedini 2019-01-17 00:40:15 +01:00
parent 469c8ecb94
commit b31908029a
6 changed files with 106 additions and 76 deletions

121
index.php
View File

@ -1,5 +1,8 @@
<?php
session_set_cookie_params ( 1*24*60*60, "/" );
session_start ();
$sections = [
0 => 'Previous',
1 => 'Home',
2 => 'About myself',
3 => 'What I\'ve done so far',
@ -11,71 +14,22 @@
}
else {
$section = $_POST ['section'];
if ( $section == 0 ) {
if ( isset ( $_SESSION [ 'section' ] ) ) {
$section = $_SESSION [ 'section' ];
}
else {
$section = 1;
}
}
$_SESSION [ 'section' ] = $section;
$section_title = $sections [ $section ];
$sections_content = [
1 =>
'<header class="masthead" style="background-image: url(\'img/bg-1.jpg\')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-10 mx-auto">
<div class="site-heading">
<h1>Bryan Joshua Pedini</h1>
<span class="subheading">An eighteen years old guy from Italy, with just some great ideas</span>
</div>
</div>
</div>
</div>
</header>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright &copy; Bryan Pedini <?php echo date("Y"); ?></p>
</div>
</div>
</div>
</footer>',
2 =>
'<header class="masthead" style="background-image: url(\'img/bg-2.jpg\')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>About Me</h1>
<span class="subheading">This is what I do.</span>
</div>
</div>
</div>
</div>
</header>',
1 => file_get_contents ( 'tmpl/home.phtml' ),
2 => file_get_contents ( 'tmpl/description.phtml' ),
3 => file_get_contents ( 'tmpl/projects.phtml' ),
4 => file_get_contents ( 'tmpl/ideas.phtml' ),
5 => file_get_contents ( 'tmpl/contact-form.phtml' ),
];
$arr_res = [
'status' => 200,
@ -101,6 +55,14 @@
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href="css/clean-blog.min.css" rel="stylesheet">
<style>
html,body {
scrollbar-width: none;
}
::-webkit-scrollbar {
width: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
@ -113,11 +75,12 @@
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About me</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" id="navbar-description">A brief description</a>
<a href="#" class="dropdown-item" id="navbar-work">My current projects</a>
<a href="#" class="dropdown-item" id="navbar-ideas">My ideas</a>
</div>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#" id="navbar-description">A brief description</a></li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#" id="navbar-work">My current projects</a></li>
<li class="dropdown-item"><a href="#" id="navbar-ideas">My future ideas</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact me</a>
@ -131,13 +94,14 @@
</div>
</nav>
<div id="user-content">
</div>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/clean-blog.min.js"></script>
<script>
var $ = jQuery;
function setOnClick (section) {
function getPageContent (section) {
$.ajax({
url: 'index.php',
method: 'POST',
@ -159,14 +123,19 @@
},
});
}
$('#navbar-home').on('click', function (clickEvent) { setOnClick(1) } );
$('#navbar-description').on('click', function (clickEvent) { setOnClick(2) });
$('#navbar-work').on('click', function (clickEvent) { setOnClick(3) });
$('#navbar-ideas').on('click', function (clickEvent) { setOnClick(4) });
$('#navbar-contact-form').on('click', function (clickEvent) { setOnClick(5) });
$('#navbar-contact-email').on('click', function (clickEvent) { window.location.href = "mailto:bryanpedini@bryanpedini.it"; });
$(function() {
setOnClick(1);
$('#navbar-home').on('click', function (clickEvent) { getPageContent (1) } );
$('#navbar-description').on('click', function (clickEvent) { getPageContent (2) });
$('#navbar-work').on('click', function (clickEvent) { getPageContent (3) });
$('#navbar-ideas').on('click', function (clickEvent) { getPageContent (4) });
$('#navbar-contact-form').on('click', function (clickEvent) { getPageContent (5) });
$('#navbar-contact-email').on('click', function (clickEvent) { window.location.href = "mailto:bryanpedini@bryanpedini.it"; });
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).fadeOut(500);
});
getPageContent(0);
});
</script>
</body>

0
tmpl/contact-form.phtml Normal file
View File

13
tmpl/description.phtml Normal file
View File

@ -0,0 +1,13 @@
<header class="masthead" style="background-image: url(img/bg-2.jpg)">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>About Me</h1>
<span class="subheading">This is what I do.</span>
</div>
</div>
</div>
</div>
</header>

48
tmpl/home.phtml Normal file
View File

@ -0,0 +1,48 @@
<header class="masthead" style="background-image: url(img/bg-1.jpg)">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-10 mx-auto">
<div class="site-heading">
<h1>Bryan Joshua Pedini</h1>
<span class="subheading">An eighteen years old guy from Italy, with just some great ideas</span>
</div>
</div>
</div>
</div>
</header>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright &copy; Bryan Pedini <?php echo date("Y"); ?></p>
</div>
</div>
</div>
</footer>

0
tmpl/ideas.phtml Normal file
View File

0
tmpl/projects.phtml Normal file
View File