In the previous article, we analyzed the requirements as follows:
1. Dynamic News list (this is simple)
2. News lists can be read by PAGE (this is not difficult)
3. You can read the news list without refreshing the new pages (this is a little difficult)
4. You can preview the news content (this is a little difficult)
5. User-friendly (this is required)
In the order of software engineering, we should develop software in this order: feasibility analysis = requirement analysis = outline design = detailed design = code = testing
This is a good habit because we are only a small part of the project, but also develop in the above Order. We put the outline design and detailed design together.
Next we will design the database, because the Access database is used, and the field is relatively simple. The name of the database is news.
Column
NameTypeLength
News_idLong Integer4
News_titleText255
News_contentMemory-
News_timeDate/time8
News_readtimesLong Integer4
Of course, you can add or reduce fields as needed. News_content should be as long as possible, in line with the length of news.
After the database is designed, we can start encoding. First, create an asp.net Project (I prefer web application instead of website) and name it MyNewsList. As shown in:
If the official version of vs2010 is used, many files will be generated after creation. It is a page of some styles (master page) that comes with vs2010, a bit similar to asp.net mvc. We do not need to delete them here and rename some folders. aspx, Default. aspx, Global. asax and site. delete the Mater and rename the Scripts folder to the js folder. Rename Styles to the css folder, which is more in line with our habits. Of course, you can also leave it unchanged. Copy the news database file to the App_Data folder. (If you are using vs2008 or another version, perform similar operations) the final list is as follows:
Okay, we have already built the foundation. Now we have to build a house. Create a NewsList. aspx page, which is our news list page.
Before editing NewsList. aspx, configure the web. config file to establish a database connection. Change <connectionStrings/>:
Copy codeThe Code is as follows:
<ConnectionStrings>
<Add name = "NewsConnection" connectionString = "provider = Microsoft. Jet. OLEDB.4.0; Data Source = | DataDirectory | \ news. mdb;"/>
</ConnectionStrings>
We noticed that Data Source = | DataDirectory | \ news. in mdb; DataDirectory, which is why we need to copy database files to the App_Data folder, so that we can easily call the database without worrying about path issues.
After the web. config file is configured, we start to design the foreground. The front-end body code of the NewsList. aspx page is as follows:
Copy codeThe Code is as follows:
<Body>
<Form id = "form1" runat = "server">
<Div>
<Div id = "tableData">
<Table cellpadding = "5" cellspacing = "1" width = "90%" id = "productTable" align = "center">
<Tr>
<Th style = "width: 60%">
<A style = "cursor: pointer;"> News Title </a> <span id = "productid"> </span>
</Th>
<Th style = "width: 10%">
<A style = "cursor: pointer;"> times of reading </a> <span id = "UnitPrice"> </span>
</Th>
<Th style = "width: 30%">
<A style = "cursor: pointer;"> Publish </a> <span id = "Discontinued"> </span>
</Th>
</Tr>
</Table>
</Div>
<Div id = "pagination" class = "digg">
</Div>
</Div>
</Form>
</Body>
We can see that this is a table, but it is not bound or write some code, this is to be added Using ajax later. At the same time, we noticed that there are some such IDs.
<Span id = "productid"> </span> This is required for future json binding.
Now, let's write some background code and try to connect to the database. For simplicity, I write the database connection code to NewsList. the background code of aspx and NewsList. aspx. in cs, we often encapsulate the database operation block in actual projects and only provide interfaces.
The background code is as follows:
Copy codeThe Code is as follows:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Data. OleDb;
Namespace MyNewsList
{
Public partial class NewsList: System. Web. UI. Page
{
// Database connection string
Public static string connectionString = System. Web. Configuration. WebConfigurationManager. ConnectionStrings ["NewsConnection"]. ToString ();
Public static OleDbConnection conn;
Protected void Page_Load (object sender, EventArgs e)
{
If (! Page. IsPostBack)
{
TestConnection (); // test the connection to the database
}
}
Protected void TestConnection ()
{
Conn = new OleDbConnection (connectionString); // create a new connection
Try
{
Conn. Open ();
If (conn. State = System. Data. ConnectionState. Open)
{
Response. Write ("database connection successful ");
}
Else
{
Response. Write ("the connection status is closed ");
}
}
Catch (Exception e)
{
Response. Write ("connection failed, error cause:" + e. Message); // if the connection fails, the error is displayed.
}
Finally
{
Conn. Close (); // be sure to disable conn in time
}
}
}
}
After we run the page and find "database connection successful", we start the following code encoding.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
