http___www.kroativ.net_izdvojeno_kako-napraviti-moderni-web-20-dizajn__1.xml
1.1 2.1 3.1 4.1 5.1 6.1 7.1 7.2 8.1 9.1 9.2 10.1 10.2 10.3 10.4 11.1 12.1 13.1 14.1 15.1 15.2 16.1 16.2 16.3 16.4 16.5 16.6 16.7 16.8 16.9 16.10 16.11 16.12 16.13 16.14 16.15 16.16 16.17 16.18 16.19 16.20 16.21 16.22 16.23 16.24 16.25 16.26 17.1 17.2 18.1 19.1 20.1 20.2 20.3 21.1 22.1 23.1 23.2 24.1 25.1 26.1 26.2 27.1 27.2 27.3 28.1 29.1 30.1 31.1 31.2 32.1 33.1 33.2 34.1 35.1 36.1 36.2 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 44.2 45.1 46.1 47.1 47.2 48.1 48.2 49.1 50.1 51.1 51.2 52.1 52.2 53.1 54.1 55.1 56.1 56.2 57.1 58.1 58.2 59.1 60.1 61.1 62.1 63.1 63.2 64.1 64.2 65.1 66.1 67.1 68.1 68.2 69.1 69.2 69.3 69.4 70.1 70.2 71.1 72.1 72.2 73.1 74.1 75.1 76.1 77.1 78.1 79.1 80.1 81.1 82.1 82.2 83.1 83.2 83.3 84.1 85.1 86.1 87.1 88.1 89.1 89.2 90.1 91.1 91.2 92.1 93.1 94.1 94.2 95.1 96.1 97.1 98.1 99.1 100.1 101.1 102.1 103.1 103.2 103.3 104.1 105.1 106.1 107.1 107.2 107.3 107.4 108.1 109.1 110.1 111.1 111.2 112.1 112.2 113.1 114.1 115.1 117.1 118.1 119.1 119.2 119.3 120.1 121.1 122.1 123.1 124.1 125.1 125.2 126.1 127.1 127.2 128.1 129.1 130.1 131.1 132.1 133.1 134.1 134.2 134.3 134.4 135.1 136.1 137.1 138.1 139.1 140.1 140.2 141.1 142.1 143.1 144.1 144.2 145.1 146.1 147.1 148.1 149.1 150.1 151.1 152.1 153.1 153.2 154.1 155.1 156.1 157.1 158.1 159.1 160.1 161.1 162.1 163.1 164.1 165.1 166.1 167.1 168.1 169.1 170.1 171.1 171.2 171.3 172.1 173.1 174.1 175.1 176.1 177.1 177.2 178.1 179.1 179.2 180.1 181.1 182.1 183.1 184.1 184.2 185.1 185.2 186.1 187.1 188.1 189.1 189.2 190.1 191.1 192.1 193.1 194.1 195.1 195.2 196.1 197.1 198.1 199.1 200.1 201.1 202.1 202.2 203.1 204.1 205.1 205.2 205.3 206.1 207.1 207.2 208.1 208.2 209.1 210.1 211.1 212.1 213.1 214.1 215.1 216.1 217.1 217.2
GFX9.COM share Create a jobs board with codeigniter – part 1, you can download now. In this two-part series we'll be creating a basic 'Jobs Board', similar to FreelanceSwitch Jobs and Smashing Jobs, using the CodeIgniter PHP framework. Also available in this series: - Create a Jobs Board with CodeIgniter - Part 1 - Create a Jobs Board with CodeIgniter - Part 2 Previous Experience Required This tutorial series will not serve as a beginners guide to CodeIgniter, however you don't need much experience with it either. I'd recommend to at the least, have an understanding of what an MVC (Model, View, Controller) system is and to have had some experience creating a simple application with CodeIgniter. What We're Creating By the end of the tutorial, we'll have created a fairly basic, 'job board' for businesses to list job openings they have available. This is very similar to the boards provided by FreelanceSwitch and Smashing Magazine; among others. Above is our homepage. Not outstandingly pretty, but we won't be concentrating too much on the front-end design. Down the left side are the recent listings, and the sidebar contains the categories. Click a category link, to be taken to the listings for that category: Click on a job listing to be taken to it's details page: Finally, a user can add their own listings by clicking the 'Add a Listing' button on the sidebar of every page: All the form fields include all the normal validation you'd expect from a secure PHP application in order to stop SQL injections, XSS attacks etc. – CodeIgniter makes this very simple. Preparation First, create a new database in whatever way you usually do (e.g. phpMyAdmin). Run the following SQL query block on the database to create our 'categories' and 'jobs' tables, including some dummy data: DROP TABLE IF EXISTS `categories`; CREATE TABLE `categories` ( `id` int(11) NOT NULL auto_increment, `name` varchar(255) default NULL, PRIMARY KEY (`id`) ); INSERT INTO `categories` (`id`,`name`) VALUES (1,'Design'), (2,'Development'), (3,'Writing'), (4,'Illustration'), (5,'Flash'), (6,'Misc'); DROP TABLE IF EXISTS `jobs`; CREATE TABLE `jobs` ( `id` int(11) NOT NULL auto_increment, `title` varchar(250) default NULL, `body` text, `location` varchar(100) default NULL, `company` varchar(100) default NULL, `posted` decimal(10,0) default NULL, `type` varchar(30) default NULL, `category` int(11) default NULL, `email` varchar(250) default NULL, `url` varchar(250) default NULL, `ipaddress` varchar(15) default NULL, PRIMARY KEY (`id`) ); INSERT INTO `jobs` (`id`,`title`,`body`,`location`,`company`,`posted`,`type`,`category`,`email`,`url`,`ipaddress`) VALUES (1,'WordPress Developer Required','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id massa et nulla fringilla sodales sit amet a justo.nCras ac urna felis. Fusce mollis sem eget dolor fermentum ac tempus justo laoreet. Sed rutrum, purus vel dictum ultrices, diam quam tempor velit, non ultricies augue elit nec tellus.nnNunc fringilla, ipsum vel porta hendrerit, magna lorem consectetur urna, quis euismod orci arcu vel neque. Vivamus adipiscing felis sed turpis volutpat ac euismod dui rutrum. Vestibulum massa libero, lacinia a sollicitudin vitae.nnDonec in lectus dolor.','London, England','The British Foreign Office',1244572411,'Full Time',2,'aa@bb.com','http://mi5.gov.uk',NULL), (2,'Another Position','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id massa et nulla fringilla sodales sit amet a justo.nCras ac urna felis. Fusce mollis sem eget dolor fermentum ac tempus justo laoreet. Sed rutrum, purus vel dictum ultrices, diam quam tempor velit, non ultricies augue elit nec tellus.nnNunc fringilla, ipsum vel porta hendrerit, magna lorem consectetur urna, quis euismod orci arcu vel neque. Vivamus adipiscing felis sed turpis volutpat ac euismod dui rutrum. Vestibulum massa libero, lacinia a sollicitudin vitae.nnDonec in lectus dolor.','Anywhere','Microsoft',1244665244,'Freelance',2,'a@a.com','http://www.microsoft.com',NULL), (3,'This is a test','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id massa et nulla fringilla sodales sit amet a justo.nCras ac urna felis. Fusce mollis sem eget dolor fermentum ac tempus justo laoreet. Sed rutrum, purus vel dictum ultrices, diam quam tempor velit, non ultricies augue elit nec tellus.nnNunc fringilla, ipsum vel porta hendrerit, magna lorem consectetur urna, quis euismod orci arcu vel neque. Vivamus adipiscing felis sed turpis volutpat ac euismod dui rutrum. Vestibulum massa libero, lacinia a sollicitudin vitae.nnDonec in lectus dolor.','New York City, USA','United Nations',1244817051,'Full Time',1,'bob@theunitednations.co.cc','http://theun-home.webs.com','127.0.0.1'), (15,'Blsh','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id massa et nulla fringilla sodales sit amet a justo.nCras ac urna felis. Fusce mollis sem eget dolor fermentum ac tempus justo laoreet. Sed rutrum, purus vel dictum ultrices, diam quam tempor velit, non ultricies augue elit nec tellus.nnNunc fringilla, ipsum vel porta hendrerit, magna lorem consectetur urna, quis euismod orci arcu vel neque. Vivamus adipiscing felis sed turpis volutpat ac euismod dui rutrum. Vestibulum massa libero, lacinia a sollicitudin vitae.nnDonec in lectus dolor.','Sydney, Australia','Company2',1244839187,'Full Time',1,'djid@dnid.com','','0.0.0.0'), (17,'This is a test','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id massa et nulla fringilla sodales sit amet a justo.nCras ac urna felis. Fusce mollis sem eget dolor fermentum ac tempus justo laoreet. Sed rutrum, purus vel dictum ultrices, diam quam tempor velit, non ultricies augue elit nec tellus.nnNunc fringilla, ipsum vel porta hendrerit, magna lorem consectetur urna, quis euismod orci arcu vel neque. Vivamus adipiscing felis sed turpis volutpat ac euismod dui rutrum. Vestibulum massa libero, lacinia a sollicitudin vitae.nnDonec in lectus dolor.','New York City, USA','United Nations',1244994501,'Full Time',2,'bob@un-jobs.com','http://un.com','0.0.0.0'); Download the latest CodeIgniter release from their website (version 1.7.1 at time of writing), extract and send the folder to your web server (either your localhost or external server). I've renamed the folder jobs-tut, and you should have the following files inside: The /system/application/ folder is where the majority of our coding will take place – so unless otherwise stated, assume all file and directory references start in this folder. First, CodeIgniter needs to be configured. Open /config/config.php. Set the $config['base_url'] variable to the URL of the root of your CodeIgniter install. For me, this is http://localhost/jobs-tut/ – remember the trailing slash! Scroll past the rest of the settings to $config['global_xss_filtering']. Set this to TRUE. CodeIgniter will automatically filter all POST, GET and COOKIE data for us, turning any code which may be harmful into HTML entities. This will save us having to filter the data manually. Save and close the config file. Inside /config/database.php, enter your database details into the areas provided. Finally, we'll be making use of several of CodeIgniter's built-in libraries and helpers. We could load these manually in the controller, however we'll auto-load them instead. Open /config/autoload.php. We will be using the 'database' and 'form_validation' libraries in this project, so set $autoload['libraries'] to: $autoload['libraries'] = array('database', 'form_validation'); As for helpers, we will be using 'url', 'form' and 'security'. Set $autoload['helper'] to: $autoload['helper'] = array('url','form','security'); The Controller In /config/routes.php, set the default controller to jobs: $route['default_controller'] = "jobs"; CodeIgniter will now use the Jobs controller (which we haven't yet created) when someone visits the website. This will be our only controller, so let's create it now: Inside the /controllers/ directory, create a file named jobs.php. Start this file with the following code: If you're familiar with CodeIgniter, you'll know this is the starting code for any Controller. The first function, which must have the same name as the controller, is known as the 'constructor'. All models and controllers in CodeIgniter must begin with a capital letter. Inside the constructor function, include the next two lines:$data['sitetitle'] = 'Nettuts Job Board'; $this->load->vars($data); The first line we just set the site's title. This will be used later in the view to create our title tags. The second line makes the $data array available inside our models and view. CodeIgniter will actually de-compile this array when passing it to a model or view, so that the title can be accessed simply as $sitetitle, and not $data['sitetitle']. CodeIgniter & URLs Before continuing, a quick note on how CodeIgniter handles URLs. By the end of the tutorial, one of our URLs will look something like this: http://localhost/jobs-tut/index.php/jobs/details/3/ /jobs/ is the name of the controller class. /details/ is the function inside the controller being called, and /3/ is an extra segment which in this case, is the ID of the job we're looking at the details of. Our listings page will be at http://localhost/jobs-tut/index.php/jobs/listings/. You may remove the 'index.php' in your URLs by following the directions in the 'CI User Guide'. The Models In the controller, we need to create the 'listings' function (as I mentioned previously in the URLs section). Add the following to your controller:function index() { redirect('jobs/listings'); } function listings() { echo 'hello world'; } The index() function is using a redirect to send all traffic to the root of the site to the listings() function. This is to future-proof the application if you ever decide to use a front-page other than the main listings page. If you open the site in your browser now, the URL should be redirected to index.php/jobs/listings, and you should see our 'hello world' message. Now we know everything is working correctly, replace the 'hello world' message with the following:$data['listings'] = $this->MJobs->get_listings(); $this->load->view('listings', $data); On the first line, we are calling the get_listings() function which will be inside the MJobs model, and the result will be placed inside $data['listings']. The second line is loading the 'listings' view we'll create shortly. The second parameter is passing the $data array into the view so we can access the data there. By the end of the tutorial, we'll only need two models: one for retrieving and adding job listings, the other for managing the categories. The listings model will be named 'MJobs', and categories 'MCats' – the 'M' simply makes it obvious it is a model. Including an 'M' prefix on models isn't necessary, it's just the method I learnt. Others use a '_model' suffix, or some don't use it at all. Before creating the model, though, CodeIgniter needs to have actually loaded the model. We can do this in one of two ways: by adding the models we need into the /config/autoload.phpfile; or loading them in a function in the controller like so:$this->load->model('MJobs'); As we'll be using each model on almost every page, we'll add them to the autoload. Inside /config/autoload.php, set $autoload['model']to:$autoload['model'] = array('MJobs', 'MCats'); Inside /models/create two new files, with the following inside: mjobs.php And mcats.php The code to create a model is very similar to creating the controller. The 'Jobs' Model Inside the MJobs model, we can now create the get_listings() function being called from the controller. Following the model constructor function, continue with the following code:function get_listings() { $data = array(); $this->db->order_by('id', 'desc'); $q = $this->db->get('jobs'); } Firstly inside the get_listings() function, we specify $data as an array. Below that is our SQL command to retrieve data from the database. Here, we are using CodeIgniter's Active Record class to interact with the database in an easier manner. For reference, the code we are using is the equivalent to the following in normal PHP:$q = mysql_query('SELECT * FROM jobs ORDER BY id DESC'); Alternatively, you can run native SQL commands through CodeIgniter if you'd prefer:$q = $this->db->query('SELECT * FROM jobs ORDER BY id DESC'); However when using Active Record statements, CodeIgniter automatically filters and escapes all data before running the query, thus saving us from doing so ourselves if we were to use normal SQL commands instead. For that reason, we're going to use Active Record statements throughout the application :). Continuing on, include the following at the end of get_listings():if ($q->num_rows() > 0) { foreach ($q->result_array() as $row) { $data[] = $row; } } $q->free_result(); return $data; This should be quite self-explanatory. First we check whether any results were returned from the database by running num_rows() on $q – in other words if the number of results are greater than 0. We then 'foreach' through the results and place them into the $data array. At the end we run free_result() on $q – this frees up any memory taken up by temporarily storing the results. While this isn't absolutely necessary on a small-scale application like this (as PHP should take care of this automatically), it's a good habit to get into for when you develop more intensive code. Finally, we return the $data array to the controller. Listings View You will remember that in the controller's listings() function we loaded a view named 'listings', we'll create that now. Inside /views/create four files: listings.php, header.php, sidebar.phpand footer.php. We haven't yet referenced the header, sidebar and footer files; we will soon. Inside listings.php, start with the following:load->view('header'); if ($listings) { echo ' All Listings ' . count($listings) . ''; echo ' '; $counter = 0; foreach ($listings as $row) { $counter++; } echo ''; } else { echo ' No Listings Available'; echo ' There are currently no active listings.'; } $this->load->view('sidebar'); $this->load->view('footer'); # End of file /views/listings.php There's nothing too out of the ordinary here. Since we'll be using the same header, sidebar and footer across every page of the site, it makes sense to only code these once, and reference them when needed. We do this right at the top and at the bottom of this page. Loading a view file is exactly the same as how we did inside the controller. Next, you'll remember that the controller automatically extracts the $data array before passing it to the view – for example anything in $data['listings']is referenced in the view simply as $listings. If there are listings available, we display the title, open an unordered list and start a foreach loop. The $counterwill be used to create zebra-striping (alternate row highlighting) on the listings. Also note we use count($listings)to display the total number of listings available. If there are no listings, we display a quick error message and finish off the page. Now include the main listing display code directly below Right at the top we use the counter to add a class of 'alt' to every-other row. Further down we make use of CodeIgniter's URI helper in the form of the site_url() function. This accepts an array as a parameter which contains the URI segments to append to the address. For me, the function will output: http://localhost/jobs-tut/index.php/jobs/details/1/ Where "1" is the ID of the listing as it is in the database. We then continue to create a fairly normal layout using HTML – note that to include the data we retrieved from the database we use $row['title'] (where "title" is the name of the field in the database). One part to highlight is where we display how long ago the listing was posted: $this->timeword->convert(). "timeword" is a custom CodeIgniter Library which we'll create next. Creating a CI Library Creating a custom CodeIgniter library class is essentially wrapping a normal PHP function in a class and CodeIgniter tags. The library we'll be creating is a wrapper for this function which calculates the difference between two dates, and outputs it in human-readable terms e.g. "less than 5 seconds", "about 1 month", "over 4 years" etc. The function itself is a PHP port of Ruby on Rail's distance_of_time_in_words_to_now method. Inside /system/application/libraries/, create a file named Timeword.php – the capital letter at the beginning is important! Start the file with the following: Inside the class we insert a slightly-modified version of the function we're using: function convert($from_time, $to_time = 0, $include_seconds = true) { // If no 'To' time provided, use current time. if($to_time == 0) { $to_time = time(); } $distance_in_minutes = round(abs($to_time - $from_time) / 60); $distance_in_seconds = round(abs($to_time - $from_time)); if ($distance_in_minutes >= 0 and $distance_in_minutes  = 0 and $distance_in_seconds  = 5 and $distance_in_seconds  = 10 and $distance_in_seconds  = 20 and $distance_in_seconds  = 40 and $distance_in_seconds  = 2 and $distance_in_minutes  = 45 and $distance_in_minutes  = 90 and $distance_in_minutes  = 1440 and $distance_in_minutes  = 2880 and $distance_in_minutes  = 43200 and $distance_in_minutes  = 86400 and $distance_in_minutes  = 525600 and $distance_in_minutes <= 1051199) { return 'about 1 year'; } else { return 'over ' . round(floatval($distance_in_minutes) / 525600) . ' years'; } } Finally, add the library to /config/autoload.php by changing $autoload['libraries'] to: $autoload['libraries'] = array('database', 'form_validation', 'timeword'); Check out the site in your web-browser, and other than the header, sidebar and footer files, the info from the database should be displaying correctly from the database, and you should see the Timeword library working, also. I won't go into any further detail on creating libraries for CI as that isn't the purpose of the tutorial. But hopefully that was enough to demonstrate how easy it is to add your own PHP functions in your CI application without bloating code in your model or controller. Header, Sidebar and Footer Next on the list is the other views which we called from the Listings view. /views/header.php: Nothing particularly special, a normal XHTML 1.0 Strict document. Note we are echoing $sitetitlefor the title tags, which was included in the controller's constructor function. When including a CSS stylesheet, we are using the base_url()function, which outputs the URL of the root of the site (e.g. http://localhost/jobs-tut/) – with a trailing slash. When we create the stylesheet, the /css/folder will be created at the very root of our CodeIgniter files, in the same directory as /system/and /user_guide/. Next is sidebar.php. We make use of site_url()to build the links to the 'Add a Listing' page at /jobs/add/ and a link back to the main listings page. Later we'll include a list of all the listings categories here in the sidebar. Finally, this is footer.php: Try out the site in your web browser, you should have something similar to the following: Styling As this isn't a CSS tutorial, I won't be explaining any of the styling, it's just a basic two-column layout. Right at the root of the CodeIgniter files, i.e. in your /jobs-tuts/ folder, create a folder named /css/, and inside that a file named style.css and a folder /images/. Save the following four images into the /images/ folder as: bg.png; head.gif; li.png and logo.png respectively. (Some of the images have been resized on this page to make them easier to right-click. They will appear at the correct proportions when saved.) Your file structure should be like so: Inside style.css insert the following styling: /* Stylesheet for CodeIgniter Job Board Tutorial for Nettuts by DanHarper.me */ *{margin:0;padding:0;outline:0;} body { background-color: #f7f7f7; color: #111; font-family: Arial, Helvetica, sans-serif; } h1,h2,h3,h4,h5,h6{font-family:Georgia, "Times New Roman", Times, serif;font-weight:normal;letter-spacing:1px;} h1,h2,h3,h4,h5,h6,p,ul,ol{margin:5px 0 10px 0;} h2{color:#363636;font-variant:small-caps;} p,li{font-size:0.9em;line-height:1.4em;} li{list-style-position:inside;margin-bottom:5px;} a:link,a:visited{text-decoration:none;} a:hover,a:active,a:focus{text-decoration:underline;} #wrap { background: url("images/bg.png") repeat-y #fff; border: 1px solid #dddddd; border-top: none; margin: 0 auto; overflow: hidden; width: 960px; } #head { background: url("images/head.gif") repeat-x #454545; padding: 30px 0; } #head h1 { margin: 0 0 0 20px; } #head h1 a { background: url("images/logo.png") no-repeat; display: block; height: 60px; text-indent: -9999em; width: 380px; } #content { float: left; padding: 15px 0 20px 20px; width: 720px; overflow: hidden; } h2 span.jobcount { background-color: #454545; color: #eee; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 0.8em; padding: 2px 6px; margin-left: 8px; } h2 cite { background-color: #454545; color: #eee; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 0.5em; padding: 2px 6px; margin-left: 8px; font-style: normal; font-variant: normal; } h4 { margin: 25px 0 5px 0; } ol#listings li { list-style: none; margin:0; } ol li { list-style-position: outside; margin-left: 30px; } ol#listings li a { background-color: #fafafa; border-bottom: 1px solid #efefef; border-top: 1px solid #fefefe; display: block; float: left; padding: 10px; position: relative; width: 700px; } ol#listings li.alt a { background-color: #f7f7f7; } ol#listings li a:hover, ol#listings li a:active, ol#listings li a:focus { background-color: #efefef; text-decoration: none; } span.title, span.meta { float: left; width: 60%; } span.title { color: #111; font-size: 1.2em; font-weight: bold; margin-bottom: 4px; } span.meta { color: #444; font-size: 0.8em; } span.meta em { font-size: 0.9em; vertical-align: top; } span.posted { color: #444; float: right; font-size: 0.9em; position: absolute; right: 10px; text-align: right; top: 19px; width: 30%; } span.posted cite { font-size: 0.8em; } .miscinfo { color: #555; font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.7em; font-style: italic; } .miscinfo strong { padding-right: 4px; } .miscinfo a { color: #555; } .miscinfo a:hover { text-decoration: underline; } .maininfo { margin-top: 20px; } p.error { background-color: #f4dde0; border: 1px solid #a23535; color: #222; padding: 5px 10px; } p.success { background-color: #060; border: 2px solid #0F0; color: #fff; padding: 5px 10px; } #sidebar { float: right; padding: 15px 20px 20px 20px; width: 160px; } #sidebar p.addlisting { border: 1px solid #444; margin: 0 0 15px 0; } #sidebar p.addlisting a { background-color: #454545; border: 1px solid #fefefe; color: #eee; display: block; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em; font-variant: small-caps; padding: 10px 0; text-align: center; } #sidebar p.addlisting a:hover { border: 1px solid #444; text-decoration: none; } #sidebar ul li { list-style: none; margin-bottom:0; } #sidebar ul li span { color: #696969; font-size: 0.9em; padding-right: 10px; vertical-align: text-bottom; } #sidebar ul li a { color: #363636; display: block; padding: 8px; text-decoration: none; } #sidebar ul li a:hover { background-color: #efefef; text-decoration: none; } #footer { color: #666; clear: both; font-family: Georgia, Times New Roman, serif; font-style: italic; margin: 15px auto; width: 960px; } #footer a { color: #666; text-decoration: underline; } #footer a:hover { text-decoration: none; } Check the site in your web-browser and be amazed ;) Note: I've only tested the styling in Firefox 3 & Safari 4, there will probably be a few (many?) problems in the various versions of Internet Explorer. However this is a PHP tutorial so I get to ignore all those errors :P The Details Page Now we've got the homepage coded, we can move onto the details page. This is located at: http://localhost/jobs-tuts/index.php/jobs/details/2/ Where "2" is the ID of the job in the database which we're looking up details for. Inside the controller, create a new function named details(): function details() { $data['details'] = $this->MJobs->get_details($this->uri->segment(3)); $this->load->view('details', $data); } On the first line we're running the get_details() function from the MJobs model. You'll see that this time, we're passing a parameter with the function. $this->uri->segment(3) retrieves the third segment of the URI. If our URL is: http://localhost/jobs-tut/index.php/jobs/details/2/ Then the URI segments are (they start with the controller): /jobs/details/2/ Of which the third, is "2". We're passing this through as a parameter so we can the specific listing's details. We then load the details view (which will be at /views/details.php). Details Model Function Inside the MJobs model, create the get_details() function: function get_details($id) { $data = array(); $options = array('id' => $id); $q = $this->db->get_where('jobs', $options, 1); if ($q->num_rows() > 0) { foreach ($q->result_array() as $row) { $data = $row; } } $q->free_result(); return $data; } In the get_details() function we retrieve the ID passed from the controller as a parameter. The $this->db->get_where() is executing the equivalent of this SQL statement: SELECT * FROM 'jobs' WHERE 'id' = $id LIMIT 1; The rest of the function is the same as it was in the get_listings() function – checking for a result, compiling it and returning the $data. The Details View Create a file in /views/ named details.php. Start the file with the following: load->view('header'); if ($details) { ?> Listing not found.'; } $this->load->view('sidebar'); $this->load->view('footer'); # End of file /views/details.php Very simple and similar to the listings view. We load the universal header, sidebar and footer. Note that on this page, since we'll only have one listing, we don't need to run a foreach loop. Continue with the following code, place it after the H2 header inside if ($details) {}. We're just printing out more of the details from the database: Again, a very simple layout. If a URL exists in the database for this listing, then we display the company name as a link to their website; otherwise it's just text. Continue the layout with: To apply, please contact us at . You may have used the nl2br() function in the past – it converts any new line in string into a tag. As we will be using a normal textarea for users to enter the main details of their listing, nl2br() converts the new lines into actual line breaks. On to Part 2: That's the listings & details pages done. In part two we'll be implementing categories into the site and creating the 'Add a Listing' page – complete with form validation.
1.1 1.2 1.3 1.4 1.5 1.6 2.1 2.2 2.3 2.4 2.5 2.6 2.7 3.1 4.1 5.1 7.1 9.1 11.1 14.1 15.1 19.1 20.1 21.1 24.1 27.1 27.2 28.1 29.1 51.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 60.1 61.1 62.1 67.1 68.1 68.2 68.3 68.4 68.5 69.1 70.1 70.2 70.3 70.4 70.5 70.6 71.1 72.1 72.2 72.3 72.4 72.5 73.1 73.2 73.3 73.4 73.5 73.6 73.7 74.1 74.2 74.3 74.4 74.5 74.6 75.1 76.1 79.1 80.1 81.1 82.1 83.1 84.1 86.1 87.1 88.1 89.1 91.1 92.1 93.1 94.1 96.1 97.1 98.1 99.1 101.1 101.2 101.3 101.4 101.5 101.6 102.1 102.2 102.3 102.4 102.5 102.6 103.1 104.1 105.1 106.1 106.2 117.1 117.2 117.3 117.4 117.5 117.6 117.7 117.8 117.9 117.10 118.1 119.1 121.1 122.1 124.1 125.1 126.1 127.1 128.1 129.1 131.1 132.1 133.1 134.1 135.1 136.1 137.1 138.1 140.1 141.1 142.1 143.1 144.1 145.1 146.1 147.1 148.1 149.1 150.1 152.1 153.1 154.1 155.1 156.1 157.1 160.1 160.2 160.3 160.4 160.5 160.6 161.1 163.1 166.1 166.2 166.3 167.1 168.1 169.1 170.1 171.1 173.1 174.1 175.1 176.1 177.1 178.1 180.1 181.1 182.1 182.2 186.1 187.1 188.1 189.1 190.1 195.1 195.2 195.3 196.1 197.1 198.1 199.1 201.1 202.1 203.1 204.1 206.1 207.1 208.1 209.1 211.1 212.1 213.1 215.1 216.1 217.1 218.1 219.1 220.1 222.1 224.1 226.1 228.1 230.1 231.1 232.1 233.1 233.2 233.3 233.4 234.1 237.1 242.1 243.1 248.1 249.1 249.2 249.3 249.4 250.1 250.2 250.3 251.1 252.1 253.1 254.1 255.1 256.1 257.1 258.1 259.1 260.1 261.1 263.1 264.1 265.1 266.1 267.1 269.1 270.1 271.1 272.1 273.1 275.1 276.1 277.1 278.1 279.1 281.1 282.1 283.1 285.1 285.2 285.3 286.1 287.1 288.1 292.1 295.1 301.1 305.1 306.1 307.1 314.1 317.1 323.1 323.2 323.3 323.4 323.5 324.1 324.2 324.3 324.4 325.1 326.1 327.1 328.1 329.1 331.1 332.1 333.1 334.1 336.1 337.1 338.1 340.1 341.1 341.2 341.3 341.4 342.1 343.1 343.2 345.1 348.1 348.2 349.1 350.1 351.1 352.1 353.1 354.1 355.1 357.1 357.2 358.1 359.1 359.2 359.3 359.4 359.5 359.6 359.7 360.1 361.1 361.2 361.3
Evo nas opet na istom mjestu sa drugim web dizajn stilom. U ovom tutorialu naučit ćete izraditi moderan Web 2.0 dizajn minimalističkog izgleda. Ovakav dizajn savršen je za stranice poslovne tematike. Kao što i sami možete vidjeti, poslovno ne mora uvijek značiti dosadno. Uz malo boje i par kreativnih elemenata uštogljenost poslovnog svijeta pretvaramo u veselo predstavljanje tvrtke. Izabrali samo Web 2.0 stil iz jednostavnog razloga što on znači moderno, ultra-hip, a to je upravo ono kakvim želimo predstaviti našeg klijenta. Koristili smo Twitter kao izvor informacija za naše imaginarne klijente u vezi poslovanja tvrtke. Twitter je inače servis za dijeljenje informacija sa rodbinom, prijateljima ili čitavim svijetom. Na njemu možete objavljivati što god želite (npr. što trenutno radite) te svi koji znaju vaš Twitter nadimak mogu to i vidjeti. Mi smo na naše stranice uz pomoć jQuery JavaScript library-a uključili Twitter stream. Umjesto dosadnih fontova na koje smo inače ograničeni upotrijebili smo sIFR tehnologiju i uključili moderan Gill Sans font. Naravno za kostur stranica koristili smo 960gs CSS Framework. Ako još niste, svakako pročitajte naš prošli tutorial te se pobliže upoznajte sa tim CSS alatom. Znači naučit ćete kako napraviti Web 2.0 dizajn, naučit ćete uključiti Twitter stream u vaše web stranice i upoznat ćete se sa sIFR (Scalable Inman Flash Replacement) tehnologijom. Krenimo redom, prvo ćemo kao i obično sastaviti kostur naših stranica (nemojte zaboraviti uključiti 960.css, text.css i reset.css iz 960gs CSS Framework-a) Struktura našeg Web 2.0 dizajna 940px - logo i search forma 940px - moto tvrtke i Slika 940px - meni 380px - Twitter stream 540px - vijesti 300px - o tvrtci 300px - linkovi 300px planovi 940px - footer Znači standardni 960gs grid kostur. Iza svakog reda dodajemo klasu clear, napominjemo još jednom da za detaljniji opis upotrebe 960gs CSS frameworka pogledate naš prošli tutorial. Ok, kostur imamo, a sada pogledajmo HEAD našeg dokumenta jer je nešto drugačiji od prošlog tutoriala. HEAD našeg Web 2.0 dizajna $(document).ready(function(){ join_text: "auto", username: "kroativ", // vaš Twitter username avatar_size: 32, // veličina slike vašeg Twitter avatar count: 5, // koliko unosa želimo prikazati auto_join_text_default: "rekli smo,", auto_join_text_ed: "mi", auto_join_text_ing: "mi smo", auto_join_text_reply: "odgovorili smo", auto_join_text_url: "pregledavali smo", loading_text: "učitavam twitter..." jQuery JavaScript library Između linija 2-9 imamo kao i u prošlom tutorialu 960gs stilove te na kraju naš stil (moj_style.css) za definiciju naših elemenata. Između linija 12-14 uključili smo jQuery JavaScript library. Što je to jQuery JavaScript library? Ukratko, jQuery je zbirka JavaScript funkcija i klasa za olakšanu interakciju između JavaScript-a i HTML-a. Umjesto da pišete tone JavaScript koda, uz pomoć JavaScript library-a kroz jednostavnu sintaksu zadatke obavljate brže i efikasnije. Twitter stream Za našu stranicu koristili smo jQuery Twitter plug-in, linije 23-39. Prvo smo uključili plug-in na liniji 14, te potom definirali njegove parametre na linijama 26-27. Osnovna jQuery sintaksa je $(document).ready(function(){ nakon koje dolaze ostale funkcije. Opise Twitter plug-in parametra možete vidjeti u samom kodu. Znači potrebno je definirati vaš username, a ostalo je sve po želji te vašim potrebama. Nakon što smo definirali sve parametre Twitter stream uključujemo u naš dokument tako da na željenom mjestu jednostavno dodamo   . Upotreba sIFR-a Između linija 16-21 nalazi se naša sIFR aplikacija. sIFR nam omogućava da u naše stranice uključimo bilo koji font. Mi ćemo ovdje pokriti osnove i naučit ćete kako ga koristii, a za pobliže informacije pogledajte službene stranice, primjere ili službeni demo. Za početak skinite sIFR i skinite naš source. Kada otvorite sIFR arhivu vidjet ćete foldere CSS, DEMO, FLASH i JS. Nama će biti potrebni css/sifr.css (za opće sifr stilove), flash/sifr.fla (za definiranje našeg fonta) i js/sifr.js (njega ne dirajte) te js/sifr-config.js (konfiguracija vašeg fonta). Otvorimo prvo sifr.fla u vašem Flash-u, vidjet ćete veliki MovieClip na glavnoj sceni, otvorite ga kako bi vidjeli njegovu scenu. Na njoj se nalazi Text Field, njega ne dirajte već nas samo zanima Font Family, po defaultu je odabrana Verdana, a mi odaberemo naš font. Mi smo koristili Gill Sans MT Pro – Light, vi možete koji god želite. Ostale postavke nemojte dirati osim opcije Character Embedding… Kliknite na tu opciju te samo dodajte u polje Include these characters ćčžšđŽĆČĐŠ za pravilan prikaz hrvatskih palatala u našim stranicama. Znači ništa nismo promijenili već samo dodali. Kada ste sve napravili idete na File/Export/Export Movie… te spremite vaš flash u direktorij script. Pazite da vam je Publish Settings ostao nepromijenjen po otvaranju sifr.fla, znači postavke za Flash 8 settings. Napravili smo naš ime_fonta.swf, spremili ga u direktorij script naših stranica i krećemo dalje. Zašto direktorij script? Dobra je praksa uvijek imati organizirani direktorij naših stranica, npr. [folder images za slike] – [folder style za css] – [folder script za skripte] itd… Kopirajte sifr.js i sifr-config.js u taj isti folder script, a sifr.css kopirajte u folder css. Ovo sve već imate ako ste otvorili naš source. Pogledajmo kako izgleda sifr-config.js: var gillsans = { src: 'script/gillsans.swf' sIFR.activate(gillsans); sIFR.replace(gillsans, { selector: 'h1#naslov', css: '.sIFR-root { background-color: transparent; color: #ffffff; letter-spacing: -1; font-size:48px }', offsetLeft:-1, wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h2', css: '.sIFR-root { letter-spacing: 1; color: #8db423; }', wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h3', css: '.sIFR-root { letter-spacing: 1; }', wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h4', css: '.sIFR-root { letter-spacing: 1; color: #068eca; }', wmode: 'transparent' Na liniji 2 trebamo navesti putanju do našeg swf datoteke sa fontovim, sjetite se da smo ju stavili u script direktorij, na liniji 3 naveli smo postavke fonta kako bi točno definirali prikaz fonta u flashu. Kako to učiniti saznajte na ovim stranicama. Na liniji 6 aktiviramo naš novi font i u ostatku skripte definiramo koje da elemente sIFR zamijeni te njihove postavke. Saznajte više o svim mogućnostima na službenim stranicama. Ukratko, zamijenili smo H1 tag sa ID-em naslov (naš slogan tvrtke) i zamijenili smo H2, H3 te H4 elemente. Svi će biti automatski zamijenjeni našim fontom. Napomena: Ovo je najnovija verzija sIFR-a i iz nekog čudnog razloga developeri su stavili minimalnu podržanu verziju Opera browsera na 9.61. Otvorite originalni sifr.js iz sifr3-r436.zip folder js/source. Pronađite “9.61” oko linije 451 i promijenite u “9.0“. Sada će vam raditi i u Operi. Naravno, morat ćete zamijeniti i sifr.js u vašem script direktoriju. Naš source sadrži već izmijenjenu verziju Sada kad smo pokrili Twitter stream i sIFR uključivanje možemo krenuti na naš dizajn. Header Sva tri dijela našeg headera Započinjemo sa headerom koji sadrži logo tvrtke i formu za pretraživanje. Pogledajmo kako on izgleda: Header smo podijelili na 3 dijela. Prvi za logo i pretraživanje, drugi za slogan tvrtke i neku slike te treći za navigaciju. Prvom header box-u grid_12 dodali smo klasu top_header kojom smo samo definirali širinu box-a na 113px koliko nam je širina pozadinske slike tog dijela. Cijela pozadina nam je jedna slika sa nijansama sive i zelene koju smo ponavljali po X-u cijele stranice. Napravili smo dvije klase, logo i searchf. Klasi logo smo dodali float:left, a klasi searchf smo dodali float:right. Unutar forme, u naše tekstualno polje dodali smo funkciju onblur=”if(this.value==”) this.value=’upišite ključnu riječ’;” onfocus=”if(this.value==’upišite ključnu riječ’) this.value=”;”. Zgodna stvarčica koja kada korisnik dođe u fokus našeg polja briše defaultnu vrijednost i ako se sadržaj polja nije promijenio istu vrijednost vraća. Umjesto standardnog gumba za submit dodali smo   kako bi uključili sliku povečala. Pozicionirali smo element s klasom .search_button. Polgedajmo css za prvi dio headera: body { font: 14px/22px "Trebuchet MS", Arial, Helvetica, sans-serif; background:#fff url(../images/main_bg.gif) repeat-x top left; .top_header { height:113px; } .logo { float:left; width:310px; height:79px; margin-top:15px; .searchf { float:right; width:310px; height:50px; margin-top:40px; text-align:right; position:relative; z-index:1; .moj_search { width:206px; height:22px; border:1px solid #4f4f4f; background:#383838 url(../images/searchf_bg.gif) repeat-x top left; margin:0; padding:0; padding-top:4px; padding-right:24px; padding-left:2px; color:#FFF; .search_button { width:21px; height:21px; position:absolute; top:4px; right:4px; Znači body elementu smo stavili bijelu pozadinsku boju i ponavljanje pozadinske slike samo po širini. Klasi logo smo definirali visinu i širinu te float:left. Klasi searchf smo definirali float:right, visinu i širinu te position:relative i z-index:1. Position i z-index morali smo definirati kako bi mogli postaviti search_button na željenu poziciju odnosno na kraj text fielda. Klasa moj_search sadrži stilove za tekstualno polje, definirali smo border, pozadinsku sliku (lagani gradient) i padding-right kako nam tekst ne bi prelazio ispod gumba. Definicija stila za naš submit gumb nalazi se u klasi search_button, naveli smo veliki z-index:10 da element bude ispred svih i absolute poziciju sa definiranim mjerama gornje i desne pozicije. Krenimo na moto tvrtke i glavnu sliku. Lorem ipsum dolor sit amet, dul consectetur adipisicing elit, sed do eiusmod tempor. Kao što i sami vidite ovaj dio je stvarno jednostavan. Opet smo grid_12 klasi pridodali klasu za definiciju širine odnosno .center_header (258px). Klasi center_header također smo dodali pozadinsku sliku, a H1 s ID-em naslov smo već definirali u sifr-config.js Pogledajmo CSS za slogan tvrtke i sliku: .center_header { height:258px; text-align:left; background:url(../images/header_slika.jpg) no-repeat 430px 50px; #naslov { width: 700px; height: 170px; margin: 30px 0 0 0; padding: 0px; text-align: left; Klasa center_header sadrži pozadinsku sliku koju smo pozicionirali 430px u desino i 50px od vrha, a ID naslov služi samo za pozicioniranje slogana tvrtke. Navigacija ili meni Navigacija je slična kao i u prošlom tutorialu sa jedinom razlikom što sada imam tabove. Vidjet ćete kako ih kreirati na vrlo jednostavan način. Tko? Što? Gdje? Kako? Zašto? Opet smo klasi grid_12 pridodali smo klasu .main_menu kojim smo definirali širinu (62px). Napravili smo ID navigacija u koji smo smjestili UL (unordered list) za naše kategorije. Znači isti postupak kao i u prošlom tutorialu. Pogledajmo CSS za meni: .main_menu { height:62px; text-align:right; #navigacija { padding: 5px 0; float:right; margin-top:32px; #navigacija ul { list-style: none; display: block; margin: 0 auto; #navigacija ul li { float: left; margin: 0; padding-top:5px; text-transform:uppercase; width:88px; height:30px; text-align:center; background:url(../images/tab.png) no-repeat top left; #navigacija ul li a:link, #navigacija ul li a:visited { text-decoration:none; #navigacija ul li a:hover, #navigacija ul li a:active { text-decoration:none; Znači opet klasični CSS list meni kojem smo dodali pozadinsku sliku našeg tab-a na svaki LI element unutar ID-a navigacija. Sadržaj Prvi dio sadržaja Centralni dio odnosno sadržaj podijelili smo na dva dijela. Prvi dio sadrži Twitter stream sa lijeve strane i male članke naše firme sa desne strane. U drugio dio smo stavili 3 box-a odnosno dijelove Tko smo mi? (malo informacija o tvrtci), Mi volimo (neki linkovi vezani uz tvrtku) i Planovi za budućnost. Pogledajmo konstrukciju prvog dijela (skraćena verzija, a cijelu možete pogledati u demu ili sourcu): Što se događa na Twitteru? Naslov Sadržaj Prisjetimo se, kada imamo više layera u nizu, prvo dodajemo klasu alpha, a drugom omega. Layeru grid_12 dodali smo inline css za gornju marginu od 15px, naravno da smo to mogli napraviti i kroz css klasu ali ovako je preglednije. Twitter stream stavili smo u grid_5 i dodali mu klasu alpha. Već smo prije napomenuli da je dovoljno umetnuti    na mjesto gdje želimo prikazati Twitter i jQuery plug-in će automatski ispuniti ostalo. Dodali smo stilizirani H4 tag sa naslovom i pozadinskom slikom autentične Twitter ptice. Layeru grid_7 dodali smo klasu omega i u njega ćemo staviti vijesti. Možemo dodavati koliko god vijesti želimo i sve ih stavljamo u layer klase vijesti. Stilizirani naslov postižemo sa H2 tagom kojeg smo definirali u sifr-config.js Pogledajmo CSS za prvi dio sadržaja: .vijesti { margin-top:10px; } h4.twitter { height:40px; padding-left:50px; padding-top:4px; background:url(../images/twitter.png) no-repeat top left; margin-top:10px; color:#068eca; font-size: 24px; line-height: 34px; .tweet { color: #000; } .tweet .tweet_list { list-style-type: none; margin: 0; padding: 0; .tweet .tweet_list li { overflow: auto; padding: 10px 5px; margin:0; border-bottom:1px dotted #ccc; .tweet .tweet_list li a { color: #068eca; } .tweet .tweet_list .tweet_even { background-color: #f8f4e8; } .tweet .tweet_list .tweet_avatar { padding-right: .5em; float: left; .tweet .tweet_list .tweet_avatar img { vertical-align: middle; border:1px solid #ccc; Vidite i sami, ništa spektakularno. Klasa vijesti samo ima gornju marginu od 10px da vijesti nisu stisnute, a Twitter smo ukrasili sa donjim iscrtkanim borderom te nam svaki drugi unos ima drugačiju pozadinsku boju (.tweet_even). H4 tag klase twitter sadrži nam pozadinsku sliku Twitter ptičice. Priča o 3 box-a Donji sadržaj i footer Prelazimo na drugi dio sadržaja koji smo namijenili za 3 box-a sa informacijama koje bi možda trebalo istaknuti na glavnoj stranici naše imaginarne tvrtke. Naslov Sadržaj Naslov Link Link Link Naslov Sadržaj Grid_12 klasi dodali smo inline css stil za gornju marginu od 20px kako bi malo razdvojili taj donji dio od ostatka. Napravili smo 3 layera klase grid_4 (znači 300px širine), prvom smo dodali klasu alpha, a zadnjem omega. Cijeli sadržaj box-a stavljali smo u klasu .small_box kojoj smo definirali pozadinsku boju i border. Unutar njega stavili smo tag H3 za naslove. H3 tag-u također smo dodali pozadinsku sliku oblih rubova, jednu od odlika Web 2.0 stila (layer nam je statične širine pa smo mogli koristiti statičnu pozadinsku sliku). Nakon toga dodajemo klasu .small_box_pic koja nam služi samo za umetanje slika ili ikona. Koristili smo besplatne ikone koje je napravila ekipa sa Deziner Folia. Pogledajte cijeli set i možete ih koristiti u sve svrhe. Cijeli tekstualni dio opet stavljamo u klasu .pade_ten za 10px padding-a oko teksta. Pogledajmo CSS korišten za donji dio sadržaja: h3.sub_naslov { background:url(../images/small_bg.png) no-repeat top left; padding:8px 0 8px 10px; margin:2px; .small_box { background-color: #eee; border:1px solid #e9e9e9; min-height:400px; .small_box_pic { text-align:center; margin-bottom:10px; .pade_ten { padding:10px; } Znači klasika, H3 tag klase .sub_naslov ima tu našu sliku pozadinskih rubova. Klasi .small-box dodali smo min-height:400px kako bi nam sva tri box-a uvijek bila iste veličine. Ravnajte se po box-u koji ima najveći height kako bi vam i ostali bili iste veličine. Tag min-height govori browseru koja je minimalna veličina layera. Footer Polako smo došli i do footera. Pošto smo sve važne informacije već prezentirali u footer stavljamo samo copyright informacije. © 2008 Naša Tvrtka U layer grid_12 dodali smo naš layer s ID-om footer koji sadrži copyright informacije. Definirali smo mu veličinu fonta, gornji border te smjer teksta. Pogledajmo CSS za ID footer: #footer { font-size:12px; margin:10px 0; padding:10px; text-align:center; border-top:1px dashed #89ab1d; Ovo nije potrebno objašnjavati, par standardnih css definicija. Pogledajmo kako nam izgledaju gotove stranice. Zaključak U ovom tutorialu naučili ste kako napraviti moderan Web 2.0 dizajn. Vidjeli ste i kako jednostavne stranice mogu biti lijepe te ste naučili prezentirati glavne stavke neke tvrtke bez upotrebe gomile slika. Znači jednostavnost + pravilna prezentacija informacije = dobar dizajn . Naučili ste kako iskoristiti popularne Web 2.0 servise za informiranje vaših posjetitelja te kako začiniti vaše stranice sIFR tehnologijom. Ovu šablonu možete upotrijebiti i za vaše osobne stranice. Njihova vesela priroda prigodna je praktički za sve vrste stranica, to nam je i bio cilj. Razbiti korporativnu monotoniju kreativnim dizajnom. PS: ovaj dizajn se neće dobro vidjeti u Internet Exploreru 6 no ovdje govorimo o Web 2.0 stilu, upravo izlazi verzija 8 tog browsera… Kako doskočiti ovom problemu pogledajte u našem članku o borbi protiv IE6 browsera… Ako ste skinuli naš source u njemu ćete pronaći i PSD file za ovaj dizajn, slobodno ga koristite kako god želite. Napravili ste nešto super? Pokažite nam, ostavite komentar…