Первой крупной приложения CMS прописан


Я ищу предложения или советы о некоторых код, который я написал. Я создаю онлайн-приложение, около 3 месяцев назад приложение регистрирует новых зданий, включая названия описания и так далее. Приложение отлично работает и делает то, что нужно. Во время работы с ним я постоянно учусь и совершенствую свои навыки. Я сделал включают внутренние CSS как он был разработан специально для этой страницы, но я также использовал внешний тоже. Я использовал много AJAX, PHP, и в JS. Я посмотрел на многие учебник и статьи во время работы над этим. Мой главный вопрос
1) некоторые предложения, направленные на совершенствование структуры

2) код похож на то, что в реальном мире в реальных компаниях программист писать. 3) это хорошо для тех, кто только начал карьеру и первое крупное веб-приложение он написал. Вот опять пример файла все работает, я не хочу, чтобы вы пройти через каждую строку просто предложения.

<!DOCTYPE html>

    <style type="text/css">
        /* demo styles */
        fieldset { border:0; }

        select {
            width: 400px;
        }

        a.ggg{
            color:  #003366;
            font-size: x-large;
            font-family: Monotype Corsiva;
        }

        a.gg{
            color:  #003366;
            font-size:  medium;
            font-family: Monotype Corsiva;
        }

        .darkbg{
            background:#ddd !important;
        }

        #status{ font-family:Arial; padding:5px; }

        ul#files{ list-style:none; padding:0; margin:0; }
        ul#files li{  margin-bottom:2px; width:200px; float:left; }
        ul#files li img{ max-width:180px; max-height:150px; }
        .success{ background:#FFCC99; border:1px solid #FF9933; }
        .error{ background:#f0c6c3; border:1px solid #cc6622; }
        #button { padding: .5em 1em; text-decoration: none; }
        #effect { width: 700px; height: 200px; padding: 0.4em; position: relative; }
        #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    </style>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>

   <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
   <link type="text/css" href="css/custom-theme/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
   <script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
   <script type="text/javascript" src="tags.js"></script>
   <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
   <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
   <script type="text/javascript" src="ui/jquery.ui.position.js"></script>
   <script type="text/javascript" src="ui/jquery.ui.selectmenu.js"></script>


    <script type="text/javascript">
    $(function(){
        // gui function for builodin select box gui

        $('select#Building').selectmenu({
            style:'popup',
            maxHeight: 150
        });

        $('select#Building4').selectmenu({
            style:'popup',
            maxHeight: 150
        });

        $('select#Building24').selectmenu({
            style:'popup',
            maxHeight: 150
        });
    });

    //a custom format option callback
    // builds gui for tabs
    $(function() {
        $( "#tabs" ).tabs();
    });
    // gui function for buttons 
    $(function() {
        $( "#search" ).button();
        $( "#delete" ).button();
        $( "#view" ).button();
        $( "#insert" ).button();
        $( "#upload" ).button();
        $( "#finish" ).button();
        $( "#thub" ).button();
        $( "#insroom" ).button();
        $( "#clearfields" ).button();
        $("#date").datepicker();
    });

    // ajax Function used to retrive all question runs getallquestions.php
    function allQuestions(){
        $.ajax({
            type: "POST",
            url: "getallquestions.php",
            success: function(html){
                $("#allquestions").html(html);
            }
        });
    }

    // ajax function send date to the getquestionsbydate.php and brings questions 
    function Questionsbydate(){
        $.ajax({
            type: "POST",
            url: "getquestionsbydate.php",
            data:   "date=" + document.getElementById('date').value,
            success: function(html){
                $("#allquestions").html(html);
            }
        });
    }

    function deletebuilding(){
        // gets building information 
        var x=document.getElementById("Building");
        var building=x.options[x.selectedIndex].text;

        // runs ajax function to delete the building
        $.ajax({
            type: "POST",
            url: "deletebuilding.php",
            data:   "building=" + building,
            success: function(html){
                $("#deletebuilding").html(html);
            }
        });
    }

    // gets the building information 
    function update(){
        var x=document.getElementById("Building4");
        var building4=x.options[x.selectedIndex].text;
        // ajax function to run the updatebuilding.php
        $.ajax({
            type: "POST",
            url: "updatebuilding.php",
            data:   "building4=" + building4,
            success: function(html){
                $("#updateinfo").html(html);
            }
        });
    }

    function insert(){
    // ajax function to run insertbuilding.php
        $.ajax({
            type: "POST",
            url: "insertbuilding.php",
            data:   "building2=" + document.getElementById('building2').value +
                    "&list2=" + document.getElementById('list2').value+
                    "&NoonMap2=" +  document.getElementById('NoonMap2').value+
                     "&Description2=" +  document.getElementById('Description2').value+
                    "&bldg2=" + document.getElementById('bldg2').value,
            success: function(html){
                $("#buli").html(html);
            }
        });

    }

    function EMPTY(){
    // retrives the building information 
        document.getElementById('building2').value ="" ;
        document.getElementById('list2').value="" ;
        document.getElementById('NoonMap2').value="" ;
        document.getElementById('Description2').value="" ;
        document.getElementById('bldg2').value="" ;
        document.getElementById('buli').innerHTML="";
    }

    // runs funvtion to inset the thumbnail to the database
    function thub(){
        $.ajax({
            type: "POST",
            url: "blobpart11.php",
            data:   "building2=" + document.getElementById('building2').value,
            success: function(html){
                $("#thumres").html(html);
            }
        });
    }

    // function to run the insert question runs addquestion.php
    function addquestion(){
        $.ajax({
            type: "POST",
            url: "addquestion.php",
            data:   "quest=" + document.getElementById('quest').value +
                     "&ans="+document.getElementById('ans').value,
            success: function(html){
                $("#allquestions").html(html);
            }
        });
    }

    // function for creating button gui and dialog effect 
    $(function() {
        $( "#submit" ).button();

        function runEffect() {
            var selectedEffect = $( "#effectTypes" ).val();
            var options = {};
            $( "#effect" ).show( selectedEffect, options, 500, callback );
        };

        function callback() {

        };

        // set effect from select menu value
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });

        $( "#effect" ).hide();
    });

    function callback45() {
        $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
    };

    function insertroom(){
        // retrives building information 
        var x=document.getElementById("Building24");
        var building24=x.options[x.selectedIndex].text;

        $.ajax({
        // ajax function used to run the addroom specification.php
            type: "POST",
            url: "addroomspecification.php",
            data:   "building24=" + $( "#Building24" ).val() +
                    "&Rm_Nm=" + document.getElementById('rm').value+
                    "&Filled=" +  document.getElementById('fill').value+
                    "&Gender=" +  document.getElementById('gen').value+
                    "&Dimensions=" + document.getElementById('dim').value+
                    "&Comments=" +  document.getElementById('com').value+
                    "&prcd=" +  document.getElementById('prcd').value+
                    "&bl=" +  document.getElementById('bl').value+
                    "&rest=" +  document.getElementById('rest').value+
                    "&Capacity=" + document.getElementById('cap').value,
            success: function(html){
                $("#room").html(html);
            }
        });
    }

    function clearfilds(){
    // function for clearing fields
       document.getElementById('rm').value= "" ;
       document.getElementById('fill').value="" ;
       document.getElementById('gen').value= "" ;
       document.getElementById('dim').value= "" ;
       document.getElementById('com').value= "" ;
       document.getElementById('prcd').value= "" ;
       document.getElementById('bl').value= "" ;
       document.getElementById('rest').value= "" ;
       document.getElementById('cap').value= "" ;
    }
    </script>

</head>
<body>
    <div id="content">
        <!-- header begins -->
        <div id="menu">
            <ul>
                <li id="button1"><a href="#" title="" >Home</a></li>
                <li id="button2"><a href="#" title="">Blog</a></li>
                <li id="button3"><a href="#" title="">Gallery</a></li>
                <li id="button4"><a href="#" title="">About</a></li>
            </ul>
        </div>

        <div id="logo">
            <img src="images/logo.jpg" width="300" height="180" alt="" />
        </div>

        <br /><br />

        <div id="tabs" style="height:  700px; overflow: scroll">
            <ul>
                <li><a href="#tabs-1">Search By Key word</a></li>
                <li><a href="#tabs-2">Search By Specification</a></li>
                <li><a href="#tabs-3">Modify Building Information</a></li>
                <li><a href="#tabs-4">Modify Building Information</a></li>
                <li><a href="#tabs-5">Modifyn</a></li>
            </ul>
            <div id="tabs-1" >
                <br /><br />
                <input  id="search" type="button" name="Search by date" value="Search by Date"  onclick="Questionsbydate()"/>&nbsp;&nbsp;
                <input  id="date" name="date" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="view" type="button" name="View All QUESTIONS" value="View All QUESTIONS"  onclick="allQuestions()" />
                <br /><br />

                <div id="allquestions"></div>
                <br /><br /><br />

                <div class="demo">

                    <div  align="center" class="toggler">
                       <div style="width:  700px; height: 200px"  id="effect" class="ui-widget-content ui-corner-all">
                            <h3 class="ui-widget-header ui-corner-all">Add QUESTION</h3>
                            <p>
                                <a class='gg'  >Please Enter The Question</a>&nbsp;&nbsp;<input id="quest" style="width: 300px" name="quest" /><br /><br />
                                <a class='gg' >Please Enter The Answer</a>&nbsp;&nbsp;&nbsp;&nbsp;<input id="ans" style="width: 300px" name="ans"  />
                            </p>
                        </div>
                    </div>

                    <select style="visibility: hidden" name="effects" id="effectTypes">
                        <option value="blind">Blind</option>

                    </select>

                    <center><br /><br /><br />
                    <a href="#" id="button" class="ui-state-default ui-corner-all">Add Question</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input  id="submit" type="button" name="Submit" value="Submit"  onclick="  addquestion(), callback45() " /></center>

                </div>

                <div  style="display:  none" id="dialog" title="Basic dialog">
                    <table>
                        <tr>
                            <td><a>E-Mail</a></td>
                            <td><input id="email" name="email" /></td>
                        </tr>
                        <tr>
                            <td><a>Question Asked</a></td>
                            <td><textarea id="qu" name="quest" rows="3"></textarea><br /></td>
                        </tr>
                        <tr>
                            <td><a>Question Answer</a></td>
                            <td><textarea  id="answ" name="quest" rows="3"></textarea><br /></td>
                        </tr>
                    </table>

                    <input id="op" type="button" name="reply" value="Reply" onclick="se()" />
                </div>

                <div id="response"></div>
            </div> <!-- /#tabs-1 -->

            <div id="tabs-2">

                <?php
                    $con = mysql_connect("localhost", "root");
                    if (!$con) {
                        die('Could not connect: ' . mysql_error());
                    }

                    // retrives the list of buildings 
                    mysql_select_db("buildings", $con);

                    $result6 = mysql_query("SELECT  `Building Name`
                    FROM  `buildingsinfo`
                    WHERE  `Building Name` <>  ''
                    GROUP BY  `Building Name`  ");

                    echo "<center><a class='ggg' >Please select House</a><br /><br /><br /><select  name=Building id='Building'  value=''>Building Name</option>";
                    // printing the list box select command

                    while($nt6=mysql_fetch_array($result6)) {
                        //Array or records stored in $nt
                        $hello=$nt6['Building Name'];
                        echo "<option value=$hello>$hello</option>";
                        /* Option values are added by looping through the array */
                    }

                    echo "</select><br /><br /><br />";// Closing of list box
                ?>

                <center>
                    <input type="button" id="delete"  style="width: 200px; height: 100px; font-size: large" value="DELETE BUILDING"  onclick="deletebuilding()">
                </center><br /><br />

                <div  id="deletebuilding"></div>
            </div> <!-- /#tabs-2 -->

            <div  id="tabs-3">
                <?php
                    $con = mysql_connect("localhost", "root");
                    if (!$con){
                        die('Could not connect: ' . mysql_error());
                    }
                    // retrives the list of buildings and builds dropdown box
                    mysql_select_db("buildings", $con);

                    $result6 = mysql_query("SELECT  `Building Name`
                    FROM  `buildingsinfo`
                    WHERE  `Building Name` <>  ''
                    GROUP BY  `Building Name`  ");

                    echo "<a class='ggg' >Please select House</a><br /><br /><br /><select  name=Building id='Building4'  value='' onchange='update()' >Building Name</option>";

                    // printing the list box select command
                    echo "<option value=ANY>ANY</option>";
                    while($nt6=mysql_fetch_array($result6)) {
                        //Array or records stored in $nt
                        $hello=$nt6['Building Name'];
                        echo "<option value=$hello>$hello</option>";
                        /* Option values are added by looping through the array */
                    }

                    echo "</select><br /><br /><br />"; // Closing of list box
                ?>

                <div  id="updateinfo"></div>

            </div> <!-- /#tabs-3 -->

            <div id="tabs-4">
                <h2>Step 1 Insert The Building Info</h2>

                <a class='gg' >Building Name</a>&nbsp;&nbsp;<input id="building2" name="building" value="" />
                    <br /><br />
                <a class='gg' > List No. </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="list2" name="list" value="" />
                    <br /><br />
                <a class='gg' > No. on Map.</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="NoonMap2" name="NoonMap2" value="" />
                    <br /><br />
                <a class='gg' >Description</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <textarea rows="7" style="width: 200px" id="Description2" name="Description" > </textarea>
                    <br /> <br />
                <a class='gg' >Building Initials</a>&nbsp;&nbsp;
                <input id="bldg2" name="Bldg" value="" />
                    <br /><br />
                <input id="insert" type="button" name="INSERT" value="insert"  onclick=" insert()" />
                    <br /><br /><br />
                <h2>Step 2 Insert Insert Thubnail</h2>
                <input id="thub" type="button" name="thub" value="THUBNAIL" onclick="thub()" />
                    <br /><br />
                <div id="thumres"></div>
                    <br /><br />
                <h2>Step 3 Insert Pictures</h2>
                <div id="buli"></div>
                    <br /><br /><br /><br />
                <input id="finish" type="button" name="FINISH" value="FINISH" onclick=" EMPTY()" />
            </div> <!-- /#tabs-4 -->

            <div id="tabs-5">
                <?php
                    $con = mysql_connect("localhost", "root");
                    if (!$con) {
                        die('Could not connect: ' . mysql_error());
                    }

                    // Retrives a list of buildings and builds dropdown box 
                    mysql_select_db("buildings", $con);

                    $result6 = mysql_query("SELECT  `Building Name` ,  `Bldg`
                    FROM  `buildingsinfo`
                    WHERE  `Bldg` <>  ''");
                    echo "<a class='ggg' >Please select House</a><br /><br /><br /><select  name=Building24 id='Building24'  value=''  >Building Name</option>";
                    // printing the list box select command

                    while($nt6=mysql_fetch_array($result6)) {
                        //Array or records stored in $nt
                        $hello=$nt6['Building Name'];
                        echo "<option value=$hello>$hello</option>";
                        /* Option values are added by looping through the array */
                    }

                    echo "</select><br /><br /><br />";// Closing of list box

                ?>

                <a class='gg'   >Please Enter Room Number</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="rm" name="rm" />
                    <br /><br />
                <a class='gg'   >Please Enter Building Letter</a>
                <input  id="bl" name="bl" />
                    <br /><br />
                <a class='gg' >Filled</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="fill" name="fill" />
                    <br /><br />
                <a class='gg' >Please Enter Pricing Code</a>&nbsp;&nbsp;&nbsp;
                <input id="prcd" name="prcd" />
                    <br /><br />
                <a class='gg' >Please Enter Capacity</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="cap" name="cap" />
                    <br /><br />
                <a class='gg' >Please Enter Gender</a>&nbsp;&nbsp;&nbsp;
                <input id="gen" name="gen" />
                    <br /><br />
                <a class='gg' >Please Enter Dimension</a>&nbsp;&nbsp;
                <input id="dim" name="dim" />
                    <br /><br />
                <a class='gg' >Please Enter Restriction Name</a>
                <input id="rest" name="rest" />
                    <br /><br />
                <a class='gg' >Please Enter Comments</a> &nbsp;&nbsp;&nbsp;
                <input  id="com" name="com" />
                    <br /><br />
                <input id="insroom" type="button" name="insroom" value="Insert Room" onclick="insertroom()" />&nbsp;&nbsp;&nbsp;
                <input id="clearfields" type="button" name="clearfilds" value="Clear Fields/Insert Another Room"   onclick="clearfilds()"/>
                    <br /><br /><br />
                <div  id="room"></div>

            </div> <!-- /#tabs-5 -->
        </div> <!-- /#tabs -->
    </div> <!-- /#content -->

<!-- End demo -->

    <div>
        <br /><br /><br />
        <img src="images/logo_lsu_dsa.JPG" width="231" height="83" alt="" />
    </div>

    <!--footer begins -->
    <div id="footer">
        <p>Copyright  2009. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>

        <p>Design by <a href="http://www.metamorphozis.com/" title="Flash Website Templates">Flash Website Templates</a></p>

    </div><!-- footer ends-->

    <div style="text-align: center; font-size: 0.75em;">
        Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.
    </div>
</body>
</html>


529
3
задан 8 апреля 2011 в 03:04 Источник Поделиться
Комментарии
2 ответа

Когда дело доходит до совершенствования структуры есть очень 2 способа пойти об этом, когда дело доходит до клиентской части.

Я вижу, что ваша загрузка CSS прямо на странице, это может быть профи, когда дело доходит до скорости нагрузки, но при сегодняшних скоростях интернета это практически ничего.

Я бы отдельно каждый объект сайта, лицам, являющимся:


  • УСБ

  • В JavaScript

И я хотел бы использовать ссылку / скрипт тега, чтобы включить это в вашу страницу, причина этого заключается в том, что если у вас несколько страниц вам придется копировать и вставлять каждый блок CSS и JavaScript на странице, а затем, когда вы делаете небольшие изменения вы бы редактировать много файлов.

Когда дело доходит до PHP, вы, кажется, делают то же самое, напрямую набрав код на главную страницу, как было сказано выше это может привести к проблемам с обновлениями, чтобы поместить его в шаблон и включить его:

Вы можете сделать свои шаблоны гораздо более гибкими, таким образом, вот как я думаю, что ваш макет должен выглядеть:

<!DOCTYPE html>
<html>
<?php require('templates/head.php'); ?>
<body>
<div class="wrapper">
<?php require('templates/header.php'); ?>
<?php require('templates/menu.php'); ?>
<div id="container">
<div id="main">
<?php require('templates/content/main.php'); ?>
</div>
<div id="main">
<?php require('templates/content/sidebar.php'); ?>
</div>
</div>
</div>
<?php require('templates/content/footer'); ?>
</body>
</html>

Также еще один важный вопрос, который я вижу, заключается в том, что ваш код является крайне недопустимым, вы должны гугле W3C валидатор и проверить ваш HTML

2
ответ дан 8 апреля 2011 в 09:04 Источник Поделиться

Ваш код выглядит очень многообещающе!

Веб-систем являются сложными, и Вы были в состоянии использовать различные элементы для достижения ваших целей: для JavaScript, РНР и SQL. Вы ищете совет, а значит, вы будете учиться более быстро, чем большинство программистов. Вы правильно понято основные инструменты для организации вашего кода, а также начали хорошие привычки, как с помощью комментариев, чтобы сделать ваш код более читабельным. Всех очень рад видеть в новом программист!

Предыдущий ответ был отличный на момент организации вашего кода.

Поскольку вы талантливы и задают вопросы, я также потребуется время, чтобы прокомментировать некоторые другие районы вы можете улучшить:


  • Противоречивые отступ

  • Комментарии могут быть улучшены (всегда, даже для самых опытных из нас!)

  • Противоречивые капитализации в переменной, функции и SQL имена столбцов (lowercase_with_underscores() - это мое предпочтение, так как он сохраняет ввод и isMoreReadableThanThisCrapWhichIscalledcamelcase(), однако для многих ООП-ориентированных программистов использовать второй стиль. Что не делает их правыми,!)

  • Противоречивые имена столбцов в SQL. Существуют различные подходы к этому, лично я почти всегда иметь первичный ключ столбец называется идентификатор, имя моей таблицы во множественном числе (например, зданий), а так заводиться с очень читаемым запросы Как выбрать ID из зданий. Это почти всегда плохая идея, чтобы использовать верблюжьего или нескольких слов имена столбцов, поскольку они означают, что вы должны написать побега backquotes вокруг них все время.

  • Странные запросы SQL. Ваш запрос выбрать опцию `название Дома` , `корп` с `buildingsinfo`, где `корп` <> " мля просит, Видимо каждая строка в таблице базы данных. Более простой способ сделать это, просто выберите столбец,список,вот из buildingsinfo. Нет необходимости где пунктом.

0
ответ дан 12 апреля 2011 в 02:04 Источник Поделиться