Нүүр » Программчлал » Php хэл » АУСистем хийцгээе. Хичээл 9

АУСистем хийцгээе. Хичээл 9

Манай АУС бараг бэлэн болсон. Сайтын харагдах байдлыг сайжруулах үүднээс бид сайтын үндсэн хавтаст CSS хэвийн хүснэгтийг style.css нэртэйгээр үүсгээд доорх кодыг оруулан өгнө.

/* body болон гадаад контейнерын хэвийн дүрэм */

body {
  margin: 0;
  color: #333;
  background-color: #00a0b0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  line-height: 1.5em;
}

#container {
  width: 960px;
  background: #fff;
  margin: 20px auto;
  padding: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/* Лого болон доод хэсэг */

#logo {
  display: block;
  width: 300px;
  padding: 0 660px 20px 0;
  border: none;
  border-bottom: 1px solid #00a0b0;
  margin-bottom: 40px;
}

#footer {
  border-top: 1px solid #00a0b0;
  margin-top: 40px;
  padding: 20px 0 0 0;
  font-size: .8em;
}

/* Гарчиг */

h1 {
  color: #eb6841;
  margin-bottom: 30px;
  line-height: 1.2em;
}

h2, h2 a {
  color: #edc951;
}

h2 a {
  text-decoration: none;
}

/* Мэдээний гарчиг */

#headlines {
  list-style: none;
  padding-left: 0;
  width: 75%;
}

#headlines li {
  margin-bottom: 2em;
}

.pubDate {
  font-size: .8em;
  color: #eb6841;
  text-transform: uppercase;
}

#headlines .pubDate {
  display: inline-block;
  width: 100px;
  font-size: .5em;
  vertical-align: middle;
}

#headlines.archive .pubDate {
  width: 130px;
}

.summary {
  padding-left: 100px;
}

#headlines.archive .summary {
  padding-left: 130px;
}

/* Админ хуудасны гарчиг */

#adminHeader {
  width: 940px;
  padding: 0 10px;
  border-bottom: 1px solid #00a0b0;
  margin: -30px 0 40px 0;
  font-size: 0.8em;
}

/* Формын дэвсгэр, дугуйрсан хүрээ, сүүдрийн хэв*/

form {
  margin: 20px auto;
  padding: 40px 20px;
  overflow: auto;
  background: #fff4cf;
  border: 1px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;  
  border-radius: 5px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

/* Формын элементүүдийн хэвүүд */

form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

form ul li {
  margin: .9em 0 0 0;
  padding: 0;
}

form * {
  line-height: 1em;
}

/* Талбарын утгууд */

label {
  display: block;
  float: left;
  clear: left;
  text-align: right;
  width: 15%;
  padding: .4em 0 0 0;
  margin: .15em .5em 0 0;
}

/* Талбар */

input, select, textarea {
  display: block;
  margin: 0;
  padding: .4em;
  width: 80%;
}

input, textarea, .date {
  border: 2px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;    
  border-radius: 5px;
  background: #fff;
}

input {
  font-size: .9em;
}

select {
  padding: 0;
  margin-bottom: 2.5em;
  position: relative;
  top: .7em;
}

textarea {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: .9em;
  height: 5em;
  line-height: 1.5em;
}

textarea#content {
  font-family: "Courier New", courier, fixed;
}
 
/* Сонгогдсон талбарын гадуурх хүрээ */

form *:focus {
  border: 2px solid #7c412b;
  outline: none;
}

/* Зөв бөглөгдсөн талбар ногоон дэвсгэртэй болно */

input:valid, textarea:valid {
  background: #efe;
}

/* Илгээх товчууд */

.buttons {
  text-align: center;
  margin: 40px 0 0 0;
}

input[type="submit"] {
  display: inline;
  margin: 0 20px;
  width: 12em;
  padding: 10px;
  border: 2px solid #7c412b;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;  
  border-radius: 5px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #ef7d50;
  font-weight: bold;
  -webkit-appearance: none;
}

input[type="submit"]:hover, input[type="submit"]:active {
  cursor: pointer;
  background: #fff;
  color: #ef7d50;
}

input[type="submit"]:active {
  background: #eee;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

/* Хүснэгт */

table {
  width: 100%;
  border-collapse: collapse;
}

tr, th, td {
  padding: 10px;
  margin: 0;
  text-align: left;
}

table, th {
  border: 1px solid #00a0b0;
}

th {
  border-left: none;
  border-right: none;
  background: #ef7d50;
  color: #fff;
  cursor: default;
}

tr:nth-child(odd) {
  background: #fff4cf;
}

tr:nth-child(even) {
  background: #fff;
}

tr:hover {
  background: #ddd;
  cursor: pointer;
}

/* Алдаа болон төлөвийн мэдээлэл үзүүлэх цонх */

.statusMessage, .errorMessage {
  font-size: .8em;
  padding: .5em;
  margin: 2em 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

.statusMessage {
  background-color: #2b2;
  border: 1px solid #080;
  color: #fff;
}

.errorMessage {
  background-color: #f22;
  border: 1px solid #800;
  color: #fff;
}

Манай хичээл PHP, MySQL зориулагдсан тул CSS кодын талаар дэлгэрэнгүй авч үзэхгүй. Сайтын CSS хэл хэсгийн хичээлүүдийг үзсний дараа дээрх кодууд ямар учиртайг та ойлгох болно.
Сайтын лого logo.jpg зургийг сайтын үндсэн хавтаст images хавтас үүсгээд хадгална. Та логог өөрийн хүссэн байдлаар зохиож болно.

АУСистемдээ материалууд оруулаад хэрхэн ажиллахыг туршин үзээрэй. Хэдийгээр жижигхэн гэсэн ч бидний зохиосон систем бүрэн ажиллагаатай нь сайн хэрэг. Та өөрийн хүссэн байдлаар хэвүүдийг өөрчлөн, нэмэлт функцуудыг оруулах боломжтой. Хичээлийн явцад АУС -ийн ажиллагааны зарчмыг ойлгосон тул та одоо системдээ нэмэлт функцуудыг оруулах бүрэн боломжтой.
Ямар нэгэн программыг зохиож эхлэх нь хамгийн хэцүү байдаг. Нэг загвартай болоод цааш хөгжүүлэн өргөжүүлэх нь таниас л шалтгаалах зүйл.
Миний ажлын үр дүн.

 

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

АУСистем хийцгээе. Хичээл 7

Бид АУСистемийнхээ үндсэн класс, хэрэглэгч болон админ талын скриптүүд, баазаа үүсгээд байгаа. Одоо сайтын хэв буюу темплейт хэсгийг кодлох ажилдаа…

Нээгдсэн тоо : 807

ОХП -ын дадлагын ажил 2

Энэ хичээлээр бид ОХП-ын дадлагын ажлаа үргэлжлүүлэн хийх болно. Өмнөх хичээл конструктор гэсэн ойлголт дээр ирээд дууссан байгаа. Обьект хандалтад…

Нээгдсэн тоо : 784

Php Cookie хэрхэн ажилладаг вэ?

Cookie гэж юу болох, түүнийг үүсгэх, унших, устгах талаар Cookie-тэй ажиллах хичээлд үзсэн. Энэ хичээлээр Php -гийн Cookie ойлголтын талаар…

Нээгдсэн тоо : 1721

ОХП -ын тухай

Өгөгдөл, дэд программууд (процедур, функцууд) тэдгээрийн боловсруулалтууд хоорондоо холбоо багатай байдаг процедур программчлалын үзэл санааны хөгжлийн үр дүнд обьект хандалтад…

Нээгдсэн тоо : 1780