By We are coming to the end of our lovely tutorial on how to build a nice little web application with animal management on the database part with the view – writing part. Rev up your syntaxt highlighted editors and click clack to the end of this tutorial to reap the big benefit of your work from this three – part tutorial.
Today, we are going to use PHP’s alternative syntax to view an animal – or the collection of animals when GET requests are made to our index method at the Animals controller that we wrote in the second part of this tutorial.
![ci_logo_flame[1]](https://www.techwench.com/wp-content/webpc-passthru.php?src=https://techwench.com/wp-content/uploads/2013/08/ci_logo_flame1.jpg&nocache=1){kind=logo}
We are also going to do another trick that came into my mind while doing development work for Jumpjet, and is that: i can insert the database id of the object in the div in a hidden input, and when the action buttons are clicked, i will retrieve that database id to do manipulation on the object.
Let me give you a quick example right now. In the view file from CodeIgniter i have:
<div class = "object-container"> <p class = " object-title "> <?php echo $object_title; ?> </p> <p class = "object-description"><?php echo $object_description; ?> </p> <button class = " delete-button "> </button> <input type = " hidden " name = " object-id " value=" <?php echo $object_id; ?>/> </div>
Then when you click the delete button in each div for the object / s, the javascript goes straight to the parent div of the button (which is the “object-container” classed div ), looks for a child tag input with the name attribute equal to “object-id”, pulls that value from that input, saves to the var, and makes an AJAX request to the delete method in our object controller. TL; DR i pull out the hidden input value from each div for each operation like an update or a delete.
So now, let’s write the HTML for our shiny new web application.
<html>
<head>
<title>Animals Application</title>
<script src="<?= base_url('js/animal.js') ?>"> </script>
<script src=" http://code.jquery.com/jquery-1.10.2.min.js "> </script>
</head>
<body>
<?php if(isset($animal)): //it's a single animal ?>
<div class="animal-container">
<p class="animal-title"><?= $animal['animal_title']</p>
<p class="animal-desc"><?= $animal['animal_desc']</p>
<button class = "delete-button">Delete</button>
<input type="hidden" name="object-id" value="<?php echo $animal['animal_id'] ?>"/>
</div>
<?php else: ?>
<?php foreach($animals as $animal): ?>
<div class="animal-container">
<p class="animal-title"><?= $animal['animal_title']</p>
<p class="animal-desc"><?= $animal['animal_desc']</p>
<button class = "delete-button">Delete</button>
<input type = " hidden " name = " object-id " value=" <?php echo $animal['animal_id'] ?> "/>
</div>
<?php endforeach; ?>
<?php endif; ?>
</body>
</html>
In the last tutorial, we already wrote the JavaScript code for the View. Now the logic is that, if the id is requested for the animal (i.e GET to http://yourwebsite.com/animals/2 ), we will show only a single animal.
If there is no ID though, it means the user just requested animals/ (which obviously means that the user wants to see ALL of the animals in there), we will show the whole collection of the animals in our database. Hence the if($animal) vs if($animals) statements in the view code that i wrote above.
You are free to use whatever kind of CSS you want (just write rules for the animal-container, animal-title, animal-description, and delete-button classes. The update logic is an exercise left to the reader.
So this is all about web development. You get the data from database and display it different formats (in our case, HTML), and have the user put new data, or edit already inserted data. Computers actually being all about input and output as a whole, the web application’s input output model fit’s computer’s mentality quite well.
A hint about the update logic is to create a button with a class that refers to the fact that it is useful for updating, write a form that opens only when the update button is clicked, save the animal id somewhere from the parent container div, then make an AJAX request to the update method of the Animals controller (Ok, that wasn’t a hint at all, but it was a full description of what you should do lol).
In essence, you have built your first (or other than first and you were so bored you took up a tutorial on how to build an animal management web application using CodeIgniter in PHP). Other ideas for web applications to write from this onward:
- Job listing and employer / freelancer websites
- A small and minimalistic CMS for your own usage with plug-in support
- A small product listing with payment method support (basically a mini e commerce website)
- A forum script
- Your own YouTube (i have made one myself called MyWebisodes.in, fun as hell) with user registration, video commenting, video liking / disliking, and any other cool feature you might want to add to your website)
But all work and no play made Johnny a dull boy, so if you have a fun idea of your own, definitely build on that one.
I am sure that you have a general idea of what to do from now on, and i will gladly enlist you the general steps (i love these kinds of abstractions), and here they are:
- Writing a table or more tables for your application
- Writing your models that retrieve data by certain columns / relations / all the collection
- Writing in the same models logic to insert new data (updating by id, updating by title, creating new one)
- Writing REST Controllers that do middle-management (such as doing calculations or verifying authentication)
- Prototyping your User Interface (a huge part of UX is this)
- Writing dynamic views with JavaScript, AJAX, and HTML5 to have an elegant, expressive front-end
- Having users flow in and bring you the moneys that you so proudly deserve and desire
Have a good day and have fun!
Comments