المشاركات

عرض الرسائل ذات التصنيف Bootstrap

Dynamic Treeview Menu using PHP, MySQL and AJAX Example

صورة
How to Create Dynamic Treeview Menu using PHP, MySQL and AJAX? Most modern websites use tree view to display the dynamic sidebar menu for easy navigation. In case you don't know, a Treeview is a hierarchical representation of elements in a tree-like structure. You can go for jquery solution in this context, but I would recommend 'Bootstrap Treeview' plug-in if you use the bootstrap framework to build your websites. The plug-in uses JSON dataset to create a hierarchical tree structure. I have already discussed the creation of static treeview menu using bootstrap treeview . But you can also generate a dynamic tree where you pull off the data elements stored in the database. In this tutorial I'm going to show you about creating dynamic treeview using php, mysql, ajax and bootstrap. How to Create Dymanic Treeview in PHP & MySQL? For the demo, I'm going to load all the required libraries via CDN. So there's no need to download them to your web server. Here...

How to Create Treeview with Bootstrap and jQuery

صورة
Hi! Today let's see about creating treeview using bootstrap and jquery . A Treeview is a tree like representation of elements in a hierarchical structure. It offers a quick and easy navigation through websites. Although there are several jquery plugins available for tree view that simplify the task, I wanted something that works well with bootstrap. And I found out a good library called 'Bootstrap Treeview' . It leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set. You can do much more than a simple tree, like fetch data from the database and render a dynamic tree, make it collapsible, add icons , checkboxes and filters etc. Building Treeview with Bootstrap: Now let's see how to add treeview in bootstrap. To build the menu, we need three different libraries, Bootstrap CSS jQuery Bootstrap Treeview These libraries are available in the cdn, so you can load them directly on your projects without down...

PHP CodeIgniter Pagination with Twitter Bootstrap Styles - Example

صورة
PHP Codeigniter framework provides a good number of libraries required for building a website with codeigniter and pagination library is one among them. For those who are not familiar with the term pagination, this refers to the set of numbered links that allows you to navigate from page to page to view a large set of data. For example let's say you want to fetch and display some data from database and it contains several hundreds of records. In that case pagination will be very useful to display the database resultset in chunks and let the user to skim through several page links (similar to google search results). However the pagination links in codeigniter are plain looking in nature and a little customization to codeigniter pagination doesn't hurt. Here we'll see in this tutorial, how to style codeigniter pagination links with twitter bootstrap styles . Implement Twitter Bootstrap Styles in CodeIgniter Pagination We'll see an example below to fetch and displ...

Codeigniter Login and Registration Tutorial & Source Code

صورة
Today we'll see a codeigniter tutorial demonstrating user login and registration system . As you know Login and Signup Module (User Management System) forms the base for membership driven websites and applications. I have written about codeingiter login and registration process separately earlier, but got requests from blog readers to provide a complete user management module. So in today's post, I have tried to cover as much as possible in user module comprising home, login, signup and user profile/dashboard page. So let us see how to create complete codeigniter login and registration system. Create Database for CI Login & Signup Module: First create the mysql database required for the codeigniter user management system. Read Also: CodeIgniter Two-Step Registration Form with Email Confirmation CodeIgniter Pagination Script with Search Filter using Bootstrap How to Retrieve Data From Database using CodeIgniter & AJAX CREATE DATABASE `testdb`; USE `testd...

How to Update Data in Database using ID in CodeIgniter

صورة
How to update data in database using id in codeigniter? . Using codeigniter update query will let you perform update operation on database. In the previous post, I explained you about how to insert data into database using codeigniter and bootstrap . This tutorial will demonstrates you about updating database records in codeigniter. CodeIgniter DB Update is going to be very easy as we have made required ground coding in CodeIgniter Database Insert tutorial. The update model, controller, and the view files will share some of the same features like insert along with fewer coding of its own. Update Data in Database using ID in CodeIgniter If you are a regular reader of Koding Made Simple , then you would have known, in most of my tutorials I use Twitter Bootstrap CSS Framework to design the front end. In this codeigniter database update tutorial too, I'm going to combine bootstrap with codeigniter to design the update form. Setting up MySQL Database For DB, I'm going to...

Twitter Bootstrap Circle - Round Buttons Example

صورة
Hi, here comes another nice addition to our twitter bootstrap tutorials series . This post discusses about customizing/extending bootstrap features and let you create circle/round buttons with bootstrap 3 css . Bootstrap provides seven different button classes of varying color and they are rounded rectangle by default. These button classes provide an excellent base structure for designing your own styles. You will be amazed to see how very little css code could create beautiful circle buttons. How to Create Circle Buttons in Bootstrap Creating circle buttons with bootstrap is lot easier than you think. A few css tweaks and you are done. As an example let’s design some round buttons with icons. For icons, we’ll use glyphicons that comes with bootstrap. These glyphicons are high quality scalable font icons and you can pretty much use them with small to larger size buttons without losing its quality. In Bootstrap you are allowed to create buttons in four different sizes with ...

Twitter Bootstrap Modal Form Example - Creating Contact Form

صورة
One of our earlier twitter bootstrap tutorials discussed about creating a working contact form in Bootstrap and PHP . Now let's see an example of building modal contact form in bootstrap. These types of popup modal forms will be very useful if you don't want to have separate pages for the forms like login, user signup or contact form. By default the modal dialogs are hidden, and only shown when triggered by a handle like anchor link or buttons. However these modal dialogs are not limited to forms but also can hold plain text or other html contents like image sliders, alerts, videos etc. Twitter Bootstrap Modal Form Example Twitter Bootstrap provides many helpful plug-ins and 'modal' plug-in is one among them which can be used to create responsive modal dialogs in no time. Typically the bootstrap's modal window comprises of three sections, Modal Header - which contains the heading and exit button. Modal Body - which contains the contents to show up in...

jQuery Password Strength Meter for Twitter Bootstrap Example

صورة
Hi, I'm back with another useful and interesting tutorial that talks about implementing jQuery Password Strength Meter to Twitter Bootstrap Framework. Guiding users to choose complex passwords and let them know the strength of their selected passwords during user registration process (signup) is a good and necessary practice to include in websites. Having password strength checker not only improves overall site security but will also gain users trust. Here we'll see how to incorporate it on websites built over twitter bootstrap css framework. Password Strength Meter for Twitter Bootstrap In order to implement password strength meter to bootstrap, we need a jquery plug-in called 'Pwstrength' which attach a nicely animated progress bar to the password input field and show up a real-time password strength checker. This jquery plug-in heavily relies on bootstrap framework and it requires it for the plugin to work properly. Implementing Password Strength Meter To...