Contents
Chapter 1 Introduction 1
1.1. Background and significance of the topic 1
1.2. Domestic and foreign Research status 1
1.3. Main research content 2
Chapter 2 Selection and introduction of development tools 3
2.1. Web development Technology 3
2.1.1. Introduction to HTML 3
2.1.2. Introduction to DIV+CSS 3
2.1.3. bootstrap 3
2.2. Web page creation tools 4
2.2.1. Photoshop 4
2.2.2. Dreamweaver 4
2.2.3. visual studio code 4
2.2.4. firefox 5
Chapter 3 System Analysis 6
3.1. Feasibility study 6
3.1.1. Economic feasibility 6
3.1.2. Technical feasibility 6
3.1.3. Operational feasibility 6
3.2. Development structure analysis 7
3.3. Functional requirements analysis 7< a i=22> 3.4. Data flow diagram 8 3.5. Business process analysis 9 3.6. Data dictionary 10 Fourth Chapter Overall Design 14 4.1. Design Plan 14 4.2. Functional Decomposition 14 4.3. Website Module Design 15 4.4. Database design and implementation 16 4.3.2. Back-end management 15 4.3.1. Front-end interface 15 5.1. Front and back design of the website 19 5.1.1. Home page 19 5.1 .2. The middle part of the home page 19 5.1.3. About Suzhou 20 5.1.4. Hotel introduction 21 5.1. 5. Hotel details 21 5.1.6. About us 22 5.2. Website backend design 23 5.2.1. Backend Home page 23 5.2.2. Article list page 23 Chapter 6 Testing and Summary 25 6.1. Programming environment display 25 6.2. Front-end interface implementation 25 6.3. Summary 26 References 27 Acknowledgments 28 Chapter 3 System Analysis 3.1. Feasibility Study 3.1.1. Economic Feasibility The administrator in the background can perform CURD operations on attraction information, information information and management personnel. The front-end page uses responsive design, allowing the website to automatically identify the resolution of mobile phones, tablets, and computers and automatically adjust the size of the web page. The website adopts the characteristics of HTML to optimize the prompt function of the web page and improve the loading speed. Allow users on various platforms to browse information conveniently. Suzhou has a very long history. This article is reproduced from http://www.biyezuopin.vip/onews.asp?id=14208. It has many tourist attractions and fun places. Suzhou Tourism Network is It is a tourism management website that integrates attraction display, human geography, news release, etc. This website has the function of browsing tourist information. It can also provide real-time feedback on visitors' browsing information, and finally enable the ability to leave messages with one click. Based on the above analysis and introduction, from the economic, technical, operational and other aspects, the existing effective environment, conditions and technology can develop a highly operable and powerful Personalize the tourist attraction website, implement various functions, and complete the test. First of all, several software for website design have high popularity and high operability , designers can easily use the software to design and improve tourist attraction websites. Second, administrators can verify customers, publish, modify, and manage information on the information platform, and can also implement various functions such as hotel reservations, modifications, and deletions. Third, customers can perform a series of messages, reservations, viewing and other functions under prompts. These functions are relatively simple and feasible, and they are also relatively universal, so there is no problem for ordinary people to be competent. In this way, it is feasible from an operational point of view. 3.1.3. Operational feasibility Whether the technology is mature is related to whether the website can run smoothly, and it is an important aspect that cannot be ignored. Technical feasibility research refers to which of the currently known technologies can complete the development of the software system with high quality. At the same time, the existing software and hardware configuration requirements must be taken into consideration. As far as this system is concerned, it requires a PC with high hardware and software configuration and a Windows operating system. In addition, it is necessary to install SQL2005 database server, JDK, Myeclipse, tomcat, and any browser. After configuring the basic required environment, use Java , JSP language is used to design, develop and operate tourist attraction websites. Technically speaking, the skills required for the development of these basic software systems are not a problem. 3.1.2. Technical feasibility The gap between the time, manpower, and money costs required to implement a tourist attraction website is relatively large compared to the benefits that can be obtained when the website is put into use. Therefore, when discussing from economic aspects, it is obviously more reasonable to develop this website. In this way, local village and town tourism information can be effectively integrated and centralized, and can be released and updated in a timely manner, allowing travelers to obtain information on various attractions, accommodations, strategies, etc. in a timely manner, making it convenient for consumers to obtain the information they want, and at the same time making enterprises profitable. . This can bring better work efficiency and social benefits to the local economy. The development of this website can reduce tourism labor costs, and the management is convenient, and each function can be implemented quickly to implement effective management of data. The benefits that can be achieved through effective and convenient management, timely access to information, and convenience in selection are immeasurable. This will not only help villages and towns realize informatization, but also help them promote their hometown culture and increase their income. Therefore, from an economic perspective, the construction of the website can be carried out.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper header col-xs-12">
<div class="container nav-wrapper">
<div class="head-top">
<div class="logo col-md-6 col-sm-4 col-xs-12"><img src="img/login.png"></div>
<div class="logo-right col-md-6 col-sm-8 col-xs-12">
<div class="search col-md-12 col-sm-12"> <i class="taobao"></i> <i class="sina"></i> <i class="wx"></i>
<form class="navbar-form col-xs-6" role="search">
<div class="form-group">
<input type="text" class="form-control" name="search" value="" placeholder="请输入关键字">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<!--导航-->
<div class="navs">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="index.html">首页</a> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="content.html">关于苏州</a></li>
<li><a href="jdjs.html">酒店介绍及报价</a></li>
<li><a href="list.html">最新优惠政策</a></li>
<li><a href="">预定流程</a></li>
<li><a href="text.html">苏州旅游需知</a></li>
<li><a href="yhzc.html">关于我们</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="clearfix"></div>
<!--banner-->
<div class="banner">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="img/banner1.jpg" alt="...">
<div class="carousel-caption-con">
<div class="container">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="banner-title">人和假期</div>
<p>蜜月尽在苏州 </p>
<p>咨询电话：010-56149580</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 weather">
<div class="title"></div>
<iframe width="210" scrolling="no" height="80" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 bj">
<div class="title">北京时间</div>
<div class="bjtime"></div>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 md">
<div class="title">苏州时间</div>
<div class="mdtime"></div>
</div>
</div>
</div>
</div>
<div class="item"> <img src="img/banner2.jpg" alt="...">
<div class="carousel-caption-con">
<div class="container">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="banner-title">浪漫沙滩的气味</div>
<p>你是风儿我是沙 </p>
<p>咨询电话：010-56149580</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 weather">
<div class="title"></div>
<iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 bj">
<div class="title">北京时间</div>
<div class="bjtime"></div>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 md">
<div class="title">苏州时间</div>
<div class="mdtime"></div>
</div>
</div>
</div>
</div>
<div class="item"> <img src="img/banner3.jpg" alt="...">
<div class="carousel-caption-con">
<div class="container">
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="banner-title">蔚蓝色的心跳</div>
<p>让心情随波浪跳动 </p>
<p>咨询电话：010-56149580</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 weather">
<div class="title"></div>
<iframe width="210" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&py=male&num=1&nid=119&wid=1190001"></iframe>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 bj">
<div class="title">北京时间</div>
<div class="bjtime"></div>
</div>
<div class="col-md-2 col-sm-2 col-xs-12 md">
<div class="title">苏州时间</div>
<div class="mdtime"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<div class="container">
<div class="main col-md-12">
<div class="row products">
<div class="col-md-4 col-sm-4 col-xs-12"><img src="img/zzgz.jpeg" style="width:340px;height:340px;" class="img-responsive">
<div class="products_title">周庄古镇</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12"><img src="img/qlst.jpeg" style="width:340px;height:340px;" class="img-responsive">
<div class="products_title">七里山塘</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12"><img src="img/hqs.jpeg" style="width:340px;height:340px;" class="img-responsive">
<div class="products_title">虎丘山风景区</div>
</div>
</div>
<div class="row news">
<div class="col-md-4 col-sm-4 col-xs-12"><!--img src="img/main1.png" class="img-responsive"-->
<div class="kePublic">
<!--效果html开始-->
<div class="mkeFocus">
<div class="mkeUl">
<ul>
<li><b class="bg"></b><b class="text">七月份</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban1.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
<li><b class="bg"></b><b class="text">八月份</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban2.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
<li><b class="bg"></b><b class="text">苏州</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban3.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
<li><b class="bg"></b><b class="text">浪漫</b><a href="http://www.mycodes.net" target="_blank"><img src="img/ban4.jpg" /></a><p class="yj">原价：80450元/人</p><p class="xj">现价：56900元/人</p></li>
</ul>
<div class="mkeLbtn"></div>
<div class="mkeRbtn"></div>
</div>
</div>
<!--效果html结束-->
<div class="tejia"></div>
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="row">
<div class="col-md-12 index_news_list">
<h4><a href="#">2013.04.18爱情喜剧电影《苏州遇见爱》</a></h4>
<div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。苏州的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
</div>
<div class="col-md-12 index_news_list">
<h4><a href="#">2013.04.18爱情喜剧电影《苏州遇见爱》</a></h4>
<div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。苏州的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
</div>
<div class="col-md-12 index_news_list">
<h4><a href="#">2013.04.18爱情喜剧电影《苏州遇见爱》</a></h4>
<div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。苏州的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
</div>
<div class="col-md-12 index_news_list">
<h4><a href="#">2013.04.18爱情喜剧电影《苏州遇见爱》</a></h4>
<div class="minute">截至昨日，参加南博会的南亚国家已经确认展位748个，比去年第五届南亚国家商品展增长了30.2%。苏州的展位虽然不如巴基斯坦、斯里兰卡、印度等国，但其主要推介的海洋产品和旅游项目非常具有特色。</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper footer">
<div class="service">
<div class="container">
<div class="col-md-3 col-sm-12">
<div class="link_logo"></div>
</div>
<div class="col-md-6 col-sm-12">
<div class="link_tel"></div>
</div>
<div class="col-md-3 col-sm-12 fx">
<div class="bshare-custom icon-medium">
<div class="bsPromo bsPromo2"></div>
<a title="分享到一键通" class="bshare-bsharesync" href="javascript:void(0);"></a>
<a title="分享到QQ空间" class="bshare-qzone"></a>
<a title="分享到新浪微博" class="bshare-sinaminiblog" href="javascript:void(0);"></a>
<a title="分享到人人网" class="bshare-renren" href="javascript:void(0);"></a>
<a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
</div>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
</div>
</div>
</div>
<div class="container">
<div class="friendlink">
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wx_link.png" class="img-responsive"></a></div>
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/taobao_link.png" class="img-responsive"></a></div>
<div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="img/wb_link.png" class="img-responsive"></a></div>
</div>
<div class="copyright col-md-12">
<p>版权所有：人和假期旅游咨询 咨询电话：15611549285 传真：010-66094197</p>
<p>北京西城区复兴门内大街45号 4号楼101室 邮编：100801 京IPC备1300362号 <a href="javascript:void(0)" target="_blank"></a></p>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script language="javascript">
var rnum=$(".mkeUl ul li").size();
var cnum=0;
$(".mke_ns2").html(rnum);
$(".mkeUl ul").width(rnum*367);
$(".mkeRbtn").click(function(){
cnum++;
if(cnum>(rnum-1)){
cnum=0
}
$(".mkeUl ul").animate({
"left":-cnum*367},300);
$(".mke_ns1").html(cnum+1);
});
$(".mkeLbtn").click(function(){
cnum--;
if(cnum<0){
cnum=rnum-1;
}
$(".mkeUl ul").animate({
"left":-cnum*367},300);
$(".mke_ns1").html(cnum+1);
});
function autoPlay(){
cnum++;
if(cnum>(rnum-1)){
cnum=0
}
$(".mkeUl ul").animate({
"left":-cnum*367},300);
$(".mke_ns1").html(cnum+1);
}
var Timer=setInterval(autoPlay,4000);
$(".mkeFocus").hover(function(){
clearInterval(Timer)},function(){
Timer=setInterval(autoPlay,4000);});
</script>
<script language="javascript">
var myDate = new Date();
var y = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
var M = myDate.getMonth(); //获取当前月份(0-11,0代表1月)
var D = myDate.getDate(); //获取当前日(1-31)
var week = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
var days=[ "日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 ",]
var H = myDate.getHours(); //获取当前小时数(0-23)
var Mt = myDate.getMinutes(); //获取当前分钟数(0-59)
time ='苏州 '+y+'年'+(M<10 ? "0"+ M : M)+'月'+(D<10 ? "0"+ D : D)+'日'+' '+'星期'+days[week];
bjtime = (H<10 ? "0"+ H : H)+':'+(Mt<10 ? "0"+ Mt : Mt);
mdtime = (H<10 ? "0"+ H+2 : H+2)+':'+(Mt<10 ? "0"+ Mt : Mt);
$(".weather .title").text(time);
$(".bjtime").text(bjtime);
$(".mdtime").text(mdtime);
</script>
</body>
</html>
