Most enterprise websites mainly provide services for users to browse the content, which requires less user input. The website construction goal should be to provide information and make it concise, clear, and beautiful; if enterprise websites provide online purchases at the same time, more targets such as security and transactions are required. Blogs or online forums generate a large amount of new data every day, the purpose of website construction should take into account the classification and quality evaluation of the content, so as to ensure that the high-quality content of different categories can be displayed to appropriate readers.
Regardless of the type of website, website architects should consider the following general design objectives:
Choose a dynamic language. Even if the website only displays static content, it will help you better accomplish other goals.
Select a suitable database for storing information
Follow the MVC architecture to make your website flexible
The above design objectives are the technical requirements of the website. In addition, the website design should follow the user-friendly principle. As your website goes online, you will find that search engines may be one of the most "active" users on your website. It is friendly to search engines and is sufficient to become the most important design goal of a website. For example, a Web page that cannot be accessed by a search engine "crawler" may be hard to be found by "natural person. If the website has many pages that are not easy to access, this problem may be caused by the structure of the website, which is not expected by the website architect.
To avoid similar problems, the website architect should consider the following general design goals:
The website has a clear structure and provides classified navigation based on the content or service.
Provides the breadcrumb navigation on deeper sub-pages. All pages are linked
The hierarchical design of URLs is associated with the content level.
URL should be as short and meaningful as possible, and contain page keywords
These design objectives are more easily understood with examples. Many well-known enterprise websites have made good design examples for reference by website Architects.
For the design goals of the website structure, refer to the IBM developerWorks website. Navigate to the top of the page, technical topics, software downloads, communities, and technical lectures on all the pages on the IBM developerWorks website. At the bottom of each sub-page, you can see the bread navigation. Taking this article as an example, the Breadcrumb Navigation section shows the location of this article on the IBM developerWorks website: developerWorks China> Technical Topics> Web development> Document Library. This navigation can help all website readers, including search engine crawlers, find their location at any time, return or go to any desired location.
The URL hierarchy design should be associated with the content hierarchy. For example,
The home pages of IBM in the United States and China are
Www.ibm.com/us
Www.ibm.com/cn
Compare the following two URLs
Www.example.com/index.php? Lang = en_us
Www.example.com/index.php? Lang = zh_cn
The former shows two associated pages through hierarchical design, using shorter URLs, easier to read and remember, and friendly to search engines.
The latter dynamically transmits the language type as parameter passing to the same page to display different pages, making the URL longer and less readable, difficult to remember, and unfriendly to search engines.
Although the vast majority of search engines have been able to include multiple dynamic pages generated by passing different parameters to the same page, when the number of parameters increases, the search engine may not be able to fully explore every dynamic page, thus making the website unable to be fully indexed. Remember that, whether it is a human or a machine, the understanding of URL parameter value passing is not as intuitive as that of URL level.
The best URL design should be like the following URL. It is not necessary to have more than one URL (.html). Even if you do not open the page, you can clearly understand the content to be expressed on the page.
Http://en.wikipedia.org/wiki/IBM
Http://zh.wikipedia.org/wiki/IBM
Http://store.apple.com/us/buy-iphone/iphone6
Http://store.apple.com/cn/buy-iphone/iphone5s
Http://store.apple.com/cn/buy-mac/imac-retina
During the URL design process, you must constantly examine each URL and remove all unnecessary characters to make the URL shorter and clearer. Believe that a good URL will speak on its own. For comparison, the following two examples of URL design are provided for reference.
Http://www.example.com/wiki/showcontent.php? Lang = en & word = IBM
Http://www.example.com/store/producthandler.php? Action = buy & region = cn & productname = xphone & productmodel = xphoneplus8
Model-view-controller (MVC) design mode
MVC is a design mode that separates the logic layer and presentation layer of an application.
A Model represents a data controller. Data reading, insertion, and update are all handled by the model.
A View is the final page displayed to users. The view is responsible for displaying data in a user-friendly manner.
A Controller is an intermediary between a model, a view, and any other resources required to process HTTP requests.
The MVC pattern allows the website code to be modified with minimal modification, and flexibly responds to various changes. When the business logic changes, the model and view can remain unchanged and only adjust the controller. When the UI needs to be changed, the model and controller can not be changed or be affected by the view changes.
Strictly abide by the MVC mode, which completely isolates data, business logic, and page display. This makes troubleshooting easier.
Generally, a typical page browsing process in the program is as follows:
The controller is called first and assigned with external input.
The controller requests data from the model based on external input.
The model obtains data from the database and sends the data to the controller.
The controller processes the data and sends the encapsulated data to the view.
View displays the page to the user based on the received data
When an error occurs on the website page, we can make a positive or reverse diagnosis based on the above process. Take reverse diagnosis as an example. First, check whether the data received by the view is correct. If the data is correct, the source of the error comes from the view. If the data is faulty, go back to the previous step, check whether the data received by the controller is correct... And so on until you find the problem.
Although the end user cannot directly benefit from the MVC design pattern, adopting this pattern will bring great convenience for website development and maintenance.
There are many MVC design patterns on developerWorks. You can search for and read articles related to the MVC design patterns as needed. Next, we will officially introduce how to use the php ci framework to develop an enterprise website and achieve the design goals mentioned above.
Use CI to develop enterprise websites
CI overview
CodeIgniter is an application development framework and toolkit for PHP website developers. Its features include and are not limited:
Small but outstanding performance
Widely compatible with various PHP versions
Almost zero configuration and command line is not required
Download the CI installation package from the official CodeIgnitor website. Unzip the package and perform simple configuration. For IDE, the ide I use is Netbeans. Netbeans provides complete PHP language support. You can use your favorite IDE for PHP development. Create a PHP project named www in Netbeans and decompress CI to the www directory.
Figure 1. Directory structure:
By default, index. php is the entry point for all CI programs. This means that all URLs will contain index. php. We need to set the. htaccess file to remove index. php from the URL. Open the. htaccess file, add the following four lines of code, save and exit.
. Htaccess code
RewriteEngine on
RewriteCond % {REQUEST_FILENAME }! -F
RewriteCond % {REQUEST_FILENAME }! -D
RewriteRule ^ (. *) $/index. php/$1 [L]
Let's take a look at the functions of the above lines of code:
RewriteEngine on is used to enable Apache URL rewriting.
RewriteCond % {REQUEST_FILENAME }! -F indicates that if the requested file exists, access the file directly. If the file does not exist, proceed to the next step.
RewriteCond % {REQUEST_FILENAME }! -D: directly access the directory if the directory exists. If the directory does not exist, proceed to the next step.
RewriteRule ^ (. *) $/index. php/$1 [L] if the requested path is neither an existing file nor a directory, append/index to the path. php/
In this way, we do not need to specify any php path when accessing any ci url. Because index. php is the entry point for all CI programs.
Now CI is ready. It's time to discuss our enterprise website.
Business needs of enterprise websites
ABC's website shows three main businesses of ABC: solutions, services, and products. ABC also hopes to provide support on its website. ABC customers come from all over the world, so ABC wants its website to support multiple languages.
After seeing this requirement, the website architect decided to start building from the English version. The English version will be reused in other languages.
According to the business requirements, the website is divided into five columns, they and their corresponding URLs are
Home-http://abc.com/en
Solutions-http://abc.com/en/solutions
Services-http: // abc.com/en/services
Products-http: // abc.com/en/products
Support-http: // abc.com/en/support
Define a route
When CI receives a user request URL, it first queries the controller corresponding to the URL in the routing table. First, we define a route for Home. The path of the route file is config/routes. php. Open the routing definition and add the following code:
$ Route ['en'] = 'en/home ';
Next we will start to write the Home controller.
Controller and view-Getting Started
In the controllers Directory, create the directory en and create home. php under the en directory, which will be our first controller. Add the following code to home. php:
Listing 1. controllelrs/en/home. php
<? Php
Class Home extends CI_Controller {
// Constructor of the Home controller
Public function _ construct (){
Parent: :__ construct ();
}
// Default entry index () method of the Home controller
Public function index (){
// Load the/en/header. php view under the views Directory
$ This-> load-> view ('/en/Header ');
// Load the/en/home. php view under the views Directory
$ This-> load-> view ('/en/home ');
// Load the/en/footer. php view under the views Directory
$ This-> load-> view ('/en/footer ');
}
}
Create the directory en under the views directory, and create header. php, home. php, and footer. php under the Directory en respectively. The code is as follows:
Listing 2. views/en/header. php
<H1> ABC.com-Header </H1>
Listing 3. views/en/home. php
<H2> Welcome to ABC.com! -Body </H2>
Listing 4. views/en/footer. php
<H3> Copyright-Footer </H3>
We have created three views for the Home controller. The header view and footer View will also be used by other controllers. The home View will only be called by the Home controller.
If you have configured PHP and started the Web service, you can enter http: // localhost/en in the browser to view the effect.
Figure 2. Effect chart
This simple homepage contains three parts of static content. Headers, bodies, and Footer. They correspond to three view files under the views/en Directory: header. php, home. php, and footer. php. Our Home controller is now working properly and has successfully loaded three static views.
So far, we have not sent any data to the view through the controller. Next we will define the data format conventions for controllers and views, and send data to the header view through different controllers.
Controller and view-Advanced
Currently, the data in the header View (ABC.com? Header) is defined by header. php. We want to send the data to the view by the controller, and the view is only responsible for displaying the data.
Next we define a $ headerdata array in the controller and send it to the header view. The controller Home code is as follows:
Listing 5. controllers/en/home. php
<? Php
Class Home extends CI_Controller {
// Define the Header data array $ headerdata
Protected $ headerdata = array (
// Define the page title data
'Title' => 'ABC-home ',
// Define the page navigation bar data
'Nav' => array (
'Home' => array (
'URL' => '/EN ',
'Activity' => TRUE
),
'Solution' => array (
'URL' => '/en/solutions ',
'Activity' => FALSE
),
'Services' => array (
'URL' => '/en/service ',
'Activity' => FALSE
),
'Products' => array (
'URL' => '/en/products ',
'Activity' => FALSE
),
'Support' => array (
'URL' => '/en/support ',
'Activity' => FALSE
)
),
);
// Constructor of the Home controller
Public function _ construct (){
Parent: :__ construct ();
}
// Default entry index () method of the Home controller
Public function index (){
// Load the/en/header. php view under the views directory and pass the navigation bar data in $ headerdata to the header view.
$ This-> load-> view ('/en/head', $ this-> headerdata );
// Load the/en/home. php view under the views Directory
$ This-> load-> view ('/en/home ');
// Load the/en/footer. php view under the views Directory
$ This-> load-> view ('/en/footer ');
}
}
$ Headerdata contains the title and navigation information to be displayed in the header View. When loading the header view, we pass $ headerdata as a parameter to the header view.
Next, the header View receives $ headerdata from the controller and displays the information to the user. The code for the header view is as follows:
Listing 6. views/en/header. php
<Html>
<Head>
<Title> <? Php echo $ title?> </Title>
</Head>
<Body>
<? Php
// Traverse the $ nav array
Foreach ($ nav as $ name => $ value ){
// If the current element is in the 'active' status, it is displayed as (active)
If ($ value ['active']) {
Echo "$ name (Active )";
} Else {
// If the current element is not 'active', the page name is displayed with a link to the page.
Echo '<a href = "'
. $ Value ['URL']. '"> ';
Echo $ name;
Echo '</a> ';
}
Echo '| ';
}
?>
</Body>
$ Headerdata is passed to the header view in the home controller. The header view can directly access the internal data of $ headerdata without specifying the array name. We can. php directly uses $ title to access home. $ headerdata ['title'] in php; we can also go to header. php directly uses $ nav to access home. $ headerdata ['Nav'] in php.
Open the browser and we will see the following page
Figure 3. Result Display
Other controllers can continue to reuse the data definition of the $ headerdata array. You only need to modify the title value and the active value to control the dynamic changes in the navigation bar; the header view does not need to be modified for any controller. Is it cool!
Now we have seen the dynamic interaction between the controller and the view. The last part of this article demonstrates a complete process from URL-> controller-> Model-> controller-> view.
URI parameter passing and model-controller-View-complete process
So far, no parameters have been passed to the controller in our URL, and the controller has not interacted with the model. Next we will demonstrate a complicated example.
The Support section of ABC company contains Support information for three categories: solutions, services, and products. Each category contains several hundred pieces of Support information. The structure is as follows:
SUPPORT
─ ── Products
│ Issue001
│ Issue002
│ Issue003
│...
─ ── Services
│ Issue001
│ Issue002
│ Issue003
│...
Category-solutions
Issue001
Issue002
Issue003
...
Because the display pages of the supported information are similar, we want to use a controller to display all the pages. A common URL may be like this:
Http://abc.com/en/support/show.php? Category = products & id = issue001
As described above, such URLs are unfriendly to users. Therefore, using the URI routing feature of CI, we use the following URL to display the issue001 page of products.
Http://abc.com/en/support/products/issue001
The URL is defined as follows:
Section 1 abc.com indicates the domain name
The second en represents the controller directory.
The third support represents the controller name.
The fourth section of products represents the function name of the controller.
Section 5 issue001 indicates the parameter passed to the controller
Next, let's create a support controller. Create support. php in the en directory. The code is as follows:
Listing 7. controllers/en/support. php
1 <? Php
Class Support extends CI_Controller {
// Define Header data for the Support controller
Protected $ headerdata = array (
// Define the title of the Support page
'Title' => 'ABC-Support ',
// Define the Support page navigation bar
'Nav' => array (
'Home' => array (
'URL' => '/EN ',
'Activity' => FALSE
),
'Solution' => array (
'URL' => '/en/solutions ',
'Activity' => FALSE
),
'Services' => array (
'URL' => '/en/service ',
'Activity' => FALSE
),
'Products' => array (
'URL' => '/en/products ',
'Activity' => FALSE
),
'Support' => array (
'URL' => '/en/support ',
'Activity' => TRUE
)
),
);
// Define the data element on the Support page
Protected $ supportdata = array (
'Type' => '',
'Issue '=> '',
'Info' =>''
);
// Constructor of the Home controller
Public function _ construct (){
// Constructor
Parent: :__ construct ();
// Load the Support data model
$ This-> load-> model ("support_model ");
}
// Default entry for the Support controller
Public function index (){
// Load the header view and pass the header data to the view
$ This-> load-> view ('/en/head', $ this-> headerdata );
// Load the footer View
$ This-> load-> view ('/en/footer ');
}
// Support controller's products entry
Public function products ($ issue ){
// Define the support data as the Products type and save it to $ supportdata
$ This-> supportdata ['type'] = 'products ';
// Save the $ issue parameter passed through the URL to $ supportdata
$ This-> supportdata ['issue '] = $ issue;
// Extract $ issue data from the Support model and save it to $ supportdata
$ This-> supportdata ['info'] = $ this-> support_model-> get_product ($ issue );
// Load the header view and pass the header data to the view
$ This-> load-> view ('/en/head', $ this-> headerdata );
// Load the support view and pass supportdata to the view
$ This-> load-> view ('/en/support', $ this-> supportdata );
// Load the footer View
$ This-> load-> view ('/en/footer ');
}
}
Compared with the Home controller, the support controller adds the following content:
A new $ supportdata array is defined to be passed to the support view.
While constructing the support controller, the support model is loaded.
Process the information returned by the support model and encapsulate it into $ supportdata
Although we have called the Support model in the support controller, we have not compiled it so far. Next, let's define the support model. Create support_model.php in the model Directory. The code is as follows:
Listing 8. models/support_model.php
<? Php
Class Support_model extends CI_Model {
// Support model constructor
Public function _ construct (){
Parent: :__ construct ();
}
// The get_product method of the Support model, which is used to return the data represented by $ issue
Public function get_product ($ issue ){
// Returns the support information for $ issue.
Return "This is the support information for $ issue ";
}
}
Here we omitted the database access operation. When get_product () is called, the support model will return a message directly. Now, the support controller can get information from the support model. The support controller encapsulates the obtained information into $ supportdata and sends it to the support view.
Now, we have defined the Support controller and model, and finally let's define the support view. Create support. php under views/en. The code is as follows:
Listing 9. views/en/support. php
<H2> Support-Body </H2>
<? Php
Echo "Type: $ type <br> ";
Echo "Issue: $ issue <br> ";
Echo "Information: $ info <br> ";
Now, the support controller, model, and view are ready. Enter the URL in the browser and we will see:
Figure 4. Final result
Conclusion
This article briefly introduces the architecture design and objectives of the website, and uses CodeIgniter to demonstrate the development process of the ABC website. In the actual development process, we also need to consider the database design and front-end design.
PHP and CodeIgnitor support multiple databases. I recommend using MySQL databases. The latest MySQL uses the InnoDB mode by default to better support transactions. If the website has no transaction requirements, the MyISAM mode should be used for better performance.
Front-end design can consider using a front-end framework to reduce the workload of front-end designers. Bootstrap is from Twitter and is currently the most popular front-end framework.