Ega’s Journal — Week 9
This is the 9th post of my journal.
What I Have Done
After recovering my health fortunately i am able to finish my task to create a blade template for the views, make 3 pages for the web that is landing page, term of use page(this will be the template for the API page), and also login page although the login page can’t do anything other than checking the input.
Here are the list of layouts i created with laravel blade format so it will be reusable
1. page.blade.php //the layouts template used on all pages2. head.blade.php //the head template (this is where you put your sources such as css files, js files, bootstrap, and so on)3. navbar.blade.php //this is the navbar that will be used all across the pages of our web4. footer.blade.php //this is the footer that will be used all across the pages of our web5. sidebar.blade.php //this layouts with a sidebar will be used on the all of the subpages of API page.
And here are the list of pages i created
1. home.blade.php //the landing page of our we.
2. termofuse.blade.php //the term of use page.
3. login.blade.php //the login page
you can see my commits at https://github.com/Alieff/timAul on branch-ega
by the way this is how the blade works.
First, i create all the modules/templates like the navbar, the head, and the footer, then i create master layouts for the template in this case i created page.blade.php for the layout of all pages except API page and it’s sub-pages. here is some example:
/*
* page.blade.php
*/<!DOCTYPE html>
<html>
<head>
@include(‘layouts.head’)
</head>
<body>
<!-- NAVBAR CODE HERE -->
@include(‘layouts.navbar’)
<!-- CONTENT OF BODY HERE -->
@yield(‘bodycontent’)
</body>
<footer class=”footer”>
@include(‘layouts.footer’)
</footer>
</html>
the include function will include the template i created for the head, navbar, and footer. the yield function will be used when we extend this master layout so that we can assign a value to this yield function using section.
After creating the master layout in this case page.blade.php i can reuse it to any page for example the home.blade.php
/*
* home.blade.php
*/@extends('layouts.page')
@section('bodycontent')
<img style="width:100%" src="..\resources\assets\images\landing.jpg" class="img-responsive" alt="Responsive image">
<div style="text-align:center;padding-bottom:100px;height: 350px" class="jumbotron">
<div class="col-lg-8 col-lg-offset-2" class="jumbotron">
<h2 id="namaku">INSPIRE CRAWLER</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed sem augue. Sed eleifend diam eget lorem dictum varius. Morbi id nisi eu erat congue tempor. Nulla urna ipsum, lacinia in vestibulum at, laoreet eget mauris. Nam viverra convallis odio, nec egestas nisi vestibulum eu.
</p>
<div class="row" style="padding-top: 25px">
<div class="col-lg-3 col-lg-offset-2 col-md-3 col-md-offset-3 col-xs-3 col-xs-offset-1"><a href="#" class="btn btn-success">Use Our API</a></div>
<div class="col-lg-3 col-lg-offset-2 col-md-3 col-md-offset-2 col-xs-3 col-xs-offset-2"><a href="#" class="btn btn-success">Find Out More</a></div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div style="width:100%;padding-left:5%;padding-right:5%;padding-top:0px;padding-bottom: 100px" class="container">
<div class="row">
<div style="text-align:center" class="col-sm-6 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2">
<h2>Get Quotes by Website</h2>
<p>Morbi id nisi eu erat congue tempor. Nulla urna ipsum, lacinia in vestibulum at, laoreet eget mauris.Nam viverra convallis odio, nec egestas nisi vestibulum eu. In blandit, urna nec finibus ullamcorper</p>
</div>
<div style="text-align:center" class="col-sm-6 col-md-4 col-lg-4">
<h2>Get Quotes by Author</h2>
<p>Aliquam erat volutpat. Sed leo purus, pulvinar quis fermentum vel, pharetra efficitur lectus. Mauris a cursus urna. Aenean id velit eget quam mollis pellentesque. Sed massa nisi, venenatis sit amet dapibus quis, elementum in purus.</p>
</div>
</div>
</div>
@endsection
so i just extend the page.blade.php file and then assign the value of the yield (bodycontent) and the boom! the landing page is done. (well making it responsive by customizing the css , making it look good and making it looklike the mockup takes a lot of time).
P.S : because we are using Laravel PHP framework, i still can’t manage to host the web app because it’s so hard to find a free web hosting that also have php support.. for the time being (the time i write this post) i still use localhost to host the webapp.
some screenshots of the web
What’s Next
before the sprint review i will refactor my code, testing it on some devices making sure the web will work and before that will look for a free web hosting for the webapp for test purpose.
