Using PHP, CSS, SQL, MYSQL, Javascript and HTML

To create a Web Standards Content Engine

By Anthony Matarazzo

Table of Contents



Introduction

Dear Valued Web Guest:



When you buy a premium web service like GoDaddy.com offers, it includes numerous software options that you can install. Some of the major applications that they offer are content management systems. These systems can be tailored through plug-ins. They are written using textual Web programming languages. Being that they are complete products, it is difficult to contemplate precise designs. After all, these applications offer an abstract implementation using Object Oriented Programming (OOP) for many different types of content.

Recently at a coffee shop in Atlanta, GA, a person was smoking a cigarette. Applying the premium cup to my lips quickly and sipping to avoid the burn pain feeling, I asked if I could have a cigarette. He had a laptop and a cool car. He is a computer technician to the public with a car that looks like Ghost Busters.

He told me that he wanted to start a unique socialization Website where its members pay a fee for use. As well, there are many other general uses that he wanted to achieve. Because I had experience in programming, I decided to create a project to find out how existing content management systems work. There are many features that I want to improve within modern content management systems. Sometimes the interface can be difficult to use. Tieing together Multimedia, a Message Center, People Searching, a Calendar, File Upload Storage and tracking, Moderate Security and Layout Publishing within the engine is what the project must accomplish. Project Renegade.

With GoDaddy.com, the PHP compiler, MYSQL server and web service are installed. This book describes the development of a content engine and includes the source to it.

Since I am developing the Website using my web server, the book is updated dynamically as more progress is made. The following files are the beginning of the first version. I wanted to have a product that had features people would use. The first version will not to have an abundance of features. This will ensure that the smaller project will get the necessary attention to details. The information provided is not complete yet.

Documentation and Reference Materials

To begin, you should be familiar with the documentation for each of the technologies used. Take a moment to review the following online manuals. Some manuals like PHP can be downloaded. Choose the chm file format if you are using Microsoft Windows for editing. When developing a web project, having tools to write souce code and manage ftp ca be a great help. There is an editor called NotePad++ that is execellent. It has syntax highlighting for many languages, PHP, HTML, CSS and Javascript are amongst the ones it supports. It is free to download. Take a moment to review and store the following links.

PHP looks like this within a web page:

PHP
  1. <HTML>
  2. <HEAD>
  3.  
  4. </HEAD>
  5. <BODY>
  6. <?php echo "This is PHP"; ?>
  7. </BODY>
  8. </HTML>

main.css

main.css
CSS
  1. a:link {
  2. 	color:blue;
  3. 	text-decoration:underline;
  4.  
  5. }
  6.  
  7. a:hover {
  8. 	background:Black;
  9. 	color:Orange;
  10. 	text-decoration:dashed;
  11.  
  12. }
  13.  
  14. a:visited	{
  15. 	color:orange;
  16. 	text-decoration:underline;
  17.  
  18. }
  19.  
  20.  
  21. /* this is the information that is displayed on the main profile page. */
  22. ul.MemberProfileSummary {
  23.  
  24.  
  25. }
  26.  
  27.  
  28. DIV.Panel {
  29.   display:none;
  30.   position:relative;
  31.   padding:0px;
  32. }
  33.  
  34. DIV.PanelDialog {
  35.   display:none;
  36.   position:relative;
  37.   padding:0px;
  38.   color:#00;
  39. }
  40.  
  41. div.PanelDialogButtons {
  42. 	clear:both;
  43. 	background:#c0c0c0;
  44. 	color:#ffffff;
  45. 	padding:3px;
  46. }
  47.  
  48.  
  49. #buffer { 
  50.     position:absolute; 
  51.     visibility:hidden; 
  52.     left:0; 
  53.     top:0 }
  54.  
  55. div#displayContainer { 
  56. 	float:left;
  57.     margin: 0 0 0 0;
  58.     padding:0px;
  59. }
  60.  
  61. body {
  62. 	margin: 0;
  63. 	padding: 0;
  64. 	font-size: 95%;
  65. 	font-family: Georgia,'Lucida Grande',Verdana,sans-serif;
  66. 	text-align:center;
  67. 	}
  68.  
  69. /* LAYOUT STUFF */
  70.  
  71. #wrapper {
  72. 	width:100%;
  73. 	margin:0 auto 0 auto;
  74. 	text-align:left;
  75. 	}
  76.  
  77. 	/* this is the color and objects of all the information that appears at 
  78. 	the top of the page.  The navigation links are handled by the ul and LI tags.*/
  79. #masthead {
  80. 	width:100%;
  81. 	margin:0px 0 0 0px;
  82. 	color:#000000;
  83. 	background: #d0d0d0 url(images/masthead.jpg) no-repeat
  84. 	}
  85.  
  86. #masthead h1 {
  87. 	margin:10px 0 2px -10px;
  88. 	padding: 16px 0 5px 13px;
  89. 	font-size:14px/165%  Georgia, arial, helvetica, sans-serif;
  90. 	letter-spacing:0.2em;
  91. 	color:#DABFFF;
  92. 	background: #00248F; 
  93. 	}
  94. #masthead h2 {
  95. 	color:#DABFFF;
  96. 	margin:10px 0 2px -10px;
  97. 	padding: 16px 0 5px 13px;
  98. 	font-size:12px/165% Georgia, arial, helvetica, sans-serif;
  99. 	letter-spacing:0.2em;
  100. 	color:#DABFFF;
  101. 	background: #00248F; 
  102. 	}
  103. #masthead h3 {
  104. 	color:#DABFFF;
  105. 	margin:10px 0 2px -10px;
  106. 	padding: 16px 0 5px 13px;
  107. 	font-size:10px/165% Georgia, arial, helvetica, sans-serif;
  108. 	letter-spacing:0.2em;
  109. 	color:#DABFFF;
  110. 	background: #00248F; 
  111. 	}
  112.  
  113. #masthead li {
  114.   float: left;
  115.   padding: 0 1em 0 1em;
  116.   border-right: 1px solid #fff;
  117. }
  118.  
  119. #masthead ul li {
  120. 	width:135px;
  121. 	height:25px;
  122. 	padding-top:4px;
  123. 	list-style-type: none;
  124. 	font-size: 12px;
  125. 	letter-spacing:0.07em;
  126. 	}
  127.  
  128. #masthead ul li a {
  129. 	display:block;
  130. 	padding:4px 0 0 11px;
  131. 	height:25px;
  132. 	text-decoration:none;
  133. 	font-weight:bold;
  134. 	}
  135.  
  136. #masthead ul li a:link, #masthead ul li a:visited, #masthead ul li a:active {
  137. 	color:#00000;
  138. }
  139.  
  140. #masthead ul li a:hover {
  141. 	color:#0000ff;
  142. }
  143.  
  144.  
  145. #MainMenu {
  146.   float: right;
  147.   list-style:none;
  148.   padding-top: 15px;
  149.   cursor:pointer;
  150. }
  151. #MainMenu li {
  152.   float: left;
  153.   cursor:pointer;
  154.   padding: 0  .5em 0 .5em;
  155. }	
  156.  
  157. #content {
  158. float:left;
  159.  	width:100%;
  160. 	background: url(images/content.gif);
  161. 	color:#000000;
  162. }
  163.  
  164. #container { 
  165. float:left;
  166.   width:300px;
  167.   margin:0;
  168. }
  169.  
  170.  
  171. /* this is the main menu navigation colors */
  172. #mainmenu li a {
  173.   color: #000000;
  174.   background: none;
  175. }
  176.  
  177. #mainmenu ul li a:link, #mainmenu ul li a:visited, #mainmenu ul li a:active {
  178. 	float: left;
  179. 	padding: 0 1em 0 1em;
  180. 	border-right: 1px solid #fff;
  181. 	color:#000;
  182. 	}
  183.  
  184. #mainmenu {
  185.   padding: 2px 0 0 0;
  186.   float: left;
  187.   list-style:none;
  188. }
  189.  
  190. #mainmenu ul li a:hover {
  191. 	color:#FF0000;
  192. 	}
  193.  
  194. /* Main column and variants */
  195. #pagemenu {
  196. 	float:none;
  197. 	text-align:center;
  198. 	width:100%;
  199. 	height:50px;
  200. 	margin:0px 0 0 0px;
  201. 	color:#000;
  202. 	background:#00248F url(images/pagemenu.png) no-repeat
  203. }
  204.  
  205. #HelpContextMain {
  206. 	float:left;
  207. 	width:500px;
  208. 	height:50px;
  209. 	color:#00000;
  210. 	margin:0 0 0 0;
  211. 	text-align:left;
  212. 	font-size:10px;
  213. }
  214.  
  215. #contextmenu {
  216. 	float:left;
  217. 	width: 200px;
  218. 	height:500px;
  219. 	margin:0px 20px 0 0;
  220. 	padding: 0px 0px 0px 0px;
  221. 	font-size: 11px;
  222. 	color:#000000;
  223.     background-color:#d0d0d0;
  224.     border-right: 1px solid #fff;
  225. }
  226.  
  227. #contextmenu li a {
  228.   color: #000000;
  229.   background: none;
  230. }
  231.  
  232.  
  233. #actionview {
  234. 	float:left;
  235. 	width:443px;
  236. 	margin:0 0 10px 30px;
  237. 	text-align:left;
  238. 	padding:10px 0 10px 0;
  239. 	font-size:12px;
  240. 	line-height:165%;
  241. }
  242.  
  243.  
  244. #blog {
  245. 	float:left;
  246. 	width:443px;
  247. 	margin:0 0 10px 30px;
  248. 	text-align:left;
  249. 	padding:10px 0 10px 0;
  250. 	font-size:12px;
  251. 	line-height:165%;
  252. 	}
  253.  
  254.  
  255. /* Side columns and specific elements */
  256.  
  257. #sidebar {
  258. 	float:right;
  259. 	width: 240px;
  260. 	margin:10px 10px 0 0;
  261. 	padding-bottom: 14px;
  262. 	font-size: 11px;
  263. 	color:#000000;
  264.         background-color:#d0d0d0;
  265. 	}
  266.  
  267. /* Footer */
  268.  
  269. #footer {
  270. 	text-align:center;
  271. 	height:88px;
  272. 	margin:0 0 0 1px;
  273. 	padding:20px 0 12px 20px;
  274. 	color:#333;
  275. 	font-size:10px;
  276. 	letter-spacing:0.09em;
  277. 	background: #008E00 url(images/footer.jpg) no-repeat
  278. 	}
  279.  
  280. #footer ul {
  281. 	float:left;
  282. 	list-style-type:none;
  283. 	display:block;
  284. 	padding:0;
  285. 	width:680px;
  286. 	margin:0 0 9px 0;
  287. 	}
  288.  
  289. #footer ul li {
  290. 	display:inline;
  291. 	margin-right: 7px;
  292. 	padding: 0 0 0 0;
  293. 	background: transparent;
  294. 	}
  295.  
  296. img {
  297. 	border: 0;
  298. 	}
  299.  
  300. .flourish {
  301. 	margin-left:24px;
  302. 	width:730px;
  303. 	height:25px;
  304. 	background: url(images/flourish.gif) no-repeat;
  305. 	}
  306.  
  307. h1 {display:none;}
  308.  
  309. h2 {
  310. 	margin:10px 0 2px -10px;
  311. 	padding: 16px 0 5px 13px;
  312. 	font-size:14px/165% Georgia, arial, helvetica, sans-serif;
  313. 	letter-spacing:0.2em;
  314. 	color:#000000;
  315. 	background: #FF856F url(images/blackhead.gif) left bottom no-repeat
  316. 	}
  317.  
  318. #sidebar h2 {
  319. 	margin-top:3px;
  320. 	font-size:12px;
  321. 	background: #FFA96F url(images/blackheadside.gif) left bottom no-repeat
  322. 	}
  323.  
  324. h2 a:link, h2 a:visited {
  325. 	font-weight:bold;
  326. 	background:transparent;
  327. 	text-decoration: none;
  328. 	color:#000000;
  329. 	}
  330.  
  331. h3 {
  332. 	letter-spacing:0.2em;
  333. 	margin-top:3px;
  334. 	margin-bottom:3px;
  335. 	margin-left:-10px;
  336. 	padding: 6px 0 5px 13px;
  337. 	color:#333;
  338. 	font-size:19px;
  339. 	font-style:italic;
  340. 	font-family: Georgia, arial, helvetica, sans-serif;
  341. 	line-height:165%;
  342. 	background: #FFCD6F url(images/whiteheadmain.gif) left bottom no-repeat
  343. 	}
  344.  
  345. #mainhome h3 {letter-spacing:0.2em;margin-top:3px;margin-bottom:3px;margin-left:-10px;padding: 6px 35px 5px 13px;color:#333;border: 0px dashed #999;font-size:19px;font-style:italic;font-family: Georgia, arial, helvetica, sans-serif;line-height:165%;background: #EAE5D8 url(images/whiteheadmain.gif) left bottom repeat-y}
  346. #sidebar h3 {margin-left:0;color: #333;text-decoration: none;font-size: 11px;padding:6px 0 5px 9px;background: #EAE5D8 url(images/whitehead.gif) left bottom no-repeat}
  347. #blog h3 {font-weight:bold;color:#333;text-decoration: none;margin-top:9px;margin-bottom:3px;margin-left:-10px;font-size:13px;}
  348. #blog h3 a:link, #blog h3 a:visited, #sidebar h3 a:link, #sidebar h3 a:visited {color:#000;text-decoration: none;}
  349. #h2 a:hover, #blog h3 a:hover, #sidebar h3 a:hover {color:#CCC;}
  350.  
  351. /* Paragraphs */
  352.  
  353. #blog p {margin: 6px 16px 6px 0;}
  354. #sidebar p {margin: 2px 0 3px 0;line-height:150%;}
  355. #footer p {margin:10px 0px 5px 0px;}
  356.  
  357. /* Key link styles */
  358.  
  359. a:link { background-color: transparent; font-weight:bold;text-decoration: underline;color:#000000;font-style:italic; }
  360. a:visited { background-color: transparent; font-weight:bold;text-decoration: underline;color:#000000;font-style:italic; }
  361. a:hover { background-color: transparent; font-weight:bold;text-decoration: none;color:#333;font-style:italic;}
  362.  
  363. #footer a:link { background-color: transparent; font-weight:bold;text-decoration: underline;color:#333 }
  364. #footer a:visited { background-color: transparent; font-weight:bold;text-decoration: underline;color:#333 }
  365.  
  366. .spacer {
  367. clear: both;
  368. }
  369.  
  370. .logos {float:right;margin:-60px 30px 0 10px;}
  371. .date {color:#999;font-size:11px;}
  372.  
  373. /* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */
  374.  
  375. .img-wrapper {
  376. 	float:left;
  377. 	margin: 15px 0 14px 5px;
  378. 	background: url(images/shadowee.gif) no-repeat bottom right;
  379. 	line-height:0;
  380. 	}
  381.  
  382. .img-wrapper img {
  383. 	margin:00;
  384. 	padding:8px;
  385. 	border:1px solid #C5BDBD;
  386. 	background:#FFF;
  387. 	position:relative;
  388. 	top:-5px;
  389. 	left:-5px;
  390. 	}
  391.  
  392. table {
  393. 	width:100%;
  394. 	margin: 10px 0 20px 0;
  395. 	border:0;
  396. 	font-size:11px;
  397. 	}
  398.  
  399. th {
  400. 	text-align:left;
  401. 	}
  402.  
  403. td, th {
  404. 	margin: 0px;
  405. 	border-top:1px dashed #999;
  406. 	padding: 3px 5px 3px 5px;
  407. 	}
  408.  
  409. dl {
  410. 	}
  411.  
  412. dt {
  413. 	float:left;
  414. 	padding:2px 5px 7px 0;
  415. 	line-height:130%;
  416. 	font-weight:bold;
  417. 	}
  418.  
  419. dd {
  420. 	margin:0;
  421. 	padding:2px 0 7px 0;
  422. 	line-height:130%;
  423. 	}
  424.  
  425. label.description {
  426. 	width:100%;
  427. 	margin: 10px 0 20px 0;
  428. 	border:0;
  429. 	font-size:11px;
  430. }
  431.  
  432. /* When a message selection list is shown, these ids are used for each column */
  433. div.MessageContainer {
  434. 	float:left;
  435. 	margin:15px 0 0 8px;
  436. 	color:#000;
  437. 	color:#000000;
  438.     background-color:#C0C0C0;
  439. }
  440.  
  441. div.Message {
  442. 	display:block;
  443. 	width:100%;
  444. 	border: dotted 2px #999;
  445. 	padding-top:5px;
  446. 	padding-bottom:10px;
  447. }
  448.  
  449. div.MessageHighlight {
  450. 	background-color:#0000CC;
  451. 	border: dotted 2px #FF0000;	
  452. }
  453.  
  454. div.MessageSelected {
  455. 	float:left;
  456. 	width: 30px;
  457. 	margin:0px 10px 0 0;
  458. 	padding-bottom: 4px;
  459. 	font-size: 11px;
  460. }
  461.  
  462.  
  463. div.MessageSubject {
  464. 	float:left;
  465. 	width: 200px;
  466. 	margin:0px 10px 0 0;
  467. 	padding-bottom: 4px;
  468. 	font-size: 11px;
  469. }
  470.  
  471. div.MessageFrom {
  472.  	float:left;
  473. 	width: 100px;
  474. 	margin:0px 10px 0 0;
  475. 	padding-bottom: 4px;
  476. 	font-size: 11px;
  477. }
  478.  
  479. div.MessageDate {
  480. 	float:left;
  481. 	width: 150px;
  482. 	margin:0px 10px 0 0;
  483. 	padding-bottom: 4px;
  484. 	font-size: 11px;
  485. }
  486.  
  487. div.MessageTime {
  488. 	float:left;
  489. 	width: 100px;
  490. 	margin:0px 10px 0 0;
  491. 	padding-bottom: 4px;
  492. 	font-size: 11px;
  493. }
  494.  
  495.  
  496. div.MessageText {
  497. 	float:left;
  498. 	width:443px;
  499. 	margin:0 0 10px 30px;
  500. 	text-align:left;
  501. 	padding:3px 3px 3px 3px;
  502. 	font-size:12px;
  503. 	line-height:110%;
  504. }
  505.  
  506. /* theses fields define the message compose dialog.*/
  507. .txtMemberAlias {
  508. 	padding:3px;
  509. }
  510.  
  511. .cboMemberAliasCombo {
  512. 	padding:3px;
  513. }
  514.  
  515. .txtSubject {
  516. maxlength:255;
  517. }
  518.  
  519.  
  520. .txtMessage { 
  521. cols:60;
  522. rows:10;
  523. }
  524.  
  525. .CommandButton {
  526. 	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
  527. 	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
  528. 	box-shadow:inset 0px 1px 0px 0px #97c4fe;
  529. 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
  530. 	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
  531. 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
  532. 	background-color:#3d94f6;
  533. 	-moz-border-radius:6px;
  534. 	-webkit-border-radius:6px;
  535. 	border-radius:6px;
  536. 	border:1px solid #337fed;
  537. 	display:inline-block;
  538. 	color:#ffffff;
  539. 	font-family:arial;
  540. 	font-size:15px;
  541. 	font-weight:bold;
  542. 	padding:6px 24px;
  543. 	text-decoration:none;
  544. 	text-shadow:1px 1px 0px #1570cd;
  545. }.CommandButton:hover {
  546. 	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
  547. 	background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
  548. 	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
  549. 	background-color:#1e62d0;
  550. }.CommandButton:active {
  551. 	position:relative;
  552. 	top:1px;
  553. }
  554.  
  555. .cmdCancel {
  556. 	float:left;
  557. }
  558.  
  559. .cmdClear {
  560. 	float:left;
  561. }
  562.  
  563. .cmdSend {
  564. 	float:left;
  565. }
  566.  
  567. .cmdSave {
  568. 	float:left;
  569. }
  570.  
  571. div.ComposeButtonGroup {
  572. 	float:left;
  573. 	background:#c0c0c0;
  574. 	color:#ffffff;
  575. 	padding:3px;
  576. }
  577.  
  578.  
  579. /* these fields are located upon the AddMedia panel. */
  580. .cboMediaType {
  581. 	float:left;
  582. 	background:#c0c0c0;
  583. 	color:#ffffff;
  584. 	padding:3px;
  585.  
  586. }
  587.  
  588. /* text */
  589. .txtLabel {
  590. 	float:left;
  591. 	background:#c0c0c0;
  592. 	color:#ffffff;
  593. 	padding:3px;
  594.  
  595. }
  596.  
  597. .chkTOC {
  598. 	float:left;
  599. 	background:#c0c0c0;
  600. 	color:#ffffff;
  601. 	padding:3px;
  602. }
  603.  
  604. .txtInformation {
  605. 	float:left;
  606. 	background:#c0c0c0;
  607. 	color:#ffffff;
  608. 	padding:3px;
  609. }
  610.  
  611.  
  612.  
  613. /* these classes are used to define the visual layout of 
  614. The ImageUpload Panel             */
  615. div.ImageUploadPanel {
  616. 	float:left;
  617. 	background:#c0c0c0;
  618. 	color:#000000;
  619. 	padding:3px;
  620. }
  621.  
  622. div.ImageUploadLabel {
  623. 	clear:both;
  624. 	padding:3px;
  625. }
  626. div.ImageFileUpload {
  627. 	clear:both;
  628. 	padding:3px;
  629. }
  630. div.ImageFileDescription {
  631. 	clear:both;
  632. 	padding:3px;
  633. }
  634. div.ImageFileShort {
  635. 	clear:both;
  636. 	padding:3px;
  637. }
  638.  
  639.  
  640. /* media database grid lists */
  641. /* holds the infromation about the file in small tense. */
  642. div.MediaStatistics {
  643.  
  644. }
  645.  
  646.  
  647. /* main display compoents of identification */
  648. div.MediaFilename {
  649.  
  650. }
  651.  
  652.  
  653. div.MediaShortDescription {
  654.  
  655. }
  656.  
  657. div.MediaDescription {
  658.  
  659. }
  660.  
  661.  
  662. /* these fields are the classes used to edit information on all media objects.*/
  663. #txtMediaShortName {
  664.  
  665. }
  666.  
  667. #txtMediaDescription {
  668. rows:10;
  669. cols:40;
  670. }
  671.  
  672.  
  673.  
  674. /* each publishing type has a div tag for forward appeal configuration */
  675. div.MediaObjectText {
  676. float:left;
  677. background:#c0c0c0;
  678. padding:10px;
  679. width:200px;
  680. margin:10px;
  681. border:3px solid #000000;
  682. cursor:pointer;
  683.  
  684.  
  685. }
  686.  
  687. div.MediaObjectVideo {
  688. float:left;
  689. background:#c0c0c0;
  690. padding:10px;
  691. width:200px;
  692. margin:10px;
  693. border:3px solid #000000;
  694.  
  695. cursor:pointer;
  696.  
  697.  
  698. }
  699.  
  700.  
  701. div.MediaObjectAudio {
  702. float:left;
  703. background:#c0c0c0;
  704. padding:10px;
  705. width:200px;
  706. margin:10px;
  707. border:3px solid #000000;
  708.  
  709. cursor:pointer;
  710.  
  711.  
  712. }
  713.  
  714. div.MediaObjectYoutube {
  715.  
  716. float:left;
  717. background:#c0c0c0;
  718. padding:10px;
  719. width:200px;
  720. margin:10px;
  721. border:3px solid #000000;
  722.  
  723. cursor:pointer;
  724.  
  725.  
  726. }
  727.  
  728.  
  729. div.MediaObjectRSSFeed {
  730. float:left;
  731. background:#c0c0c0;
  732. padding:10px;
  733. width:200px;
  734. margin:10px;
  735. border:3px solid #000000;
  736.  
  737. cursor:pointer;
  738.  
  739.  
  740. }
  741.  
  742. div.MediaRSSURL {
  743. float:left;
  744. background:#c0c0c0;
  745. padding:3px;
  746. width:200px;
  747. margin:10px;
  748.  
  749. }
  750.  
  751. div.MediaObjectImage{
  752. float:left;
  753. background:#c0c0c0;
  754. padding:10px;
  755. margin:10px;
  756. width:200px;
  757. border:3px solid #000000;
  758. cursor:pointer;
  759.  
  760. }
  761.  
  762.  
  763. div.MediaObjectPortrait {
  764. float:left;
  765. background:#c0c0c0;
  766. padding:10px;
  767. width:200px;
  768. margin:10px;
  769. border:3px solid #000000;
  770. cursor:pointer;
  771.  
  772. }
  773.  
  774. img.imgMediaImage {
  775. width:150px;
  776. height:175px;
  777. }
  778.  
  779. img.imgPortrait {
  780. width:150px;
  781. height:175px;
  782. }
  783.  
  784. object.objRealPlayer {
  785. width:150px;
  786. height:175px;
  787.  
  788. }
  789.  
  790. object.objQuickTime {
  791. width:150px;
  792. height:175px;
  793. }
  794.  
  795.  
  796. object.objShockwave { 
  797. width:150px;
  798. height:175px;
  799. }
  800.  
  801. object.objWindowsMediaPlayer {
  802. width:150px;
  803. height:175px;
  804. }
  805.  
  806. object.objAudioPlayer {
  807. width:150px;
  808. height:175px;
  809. } 
  810. object.objYoutubeVideo {
  811. width:150px;
  812. height:175px;
  813.  
  814. }
  815.  
  816.  
  817.  
  818.  
  819.  
  820. div.MediaObjectGallery {
  821. float:left;
  822. background:#c0c0c0;
  823. padding:3px;
  824. width:200px;
  825. border:3px solid #000000;
  826. cursor:pointer;
  827.  
  828.  
  829. }
  830.  
  831. .txtYoutubeLabel { 
  832. 	float:left;
  833. 	background:#c0c0c0;
  834. 	color:#ffffff;
  835. 	padding:3px;
  836. }
  837.  
  838. .txtYoutubeShortDescription {
  839. 	float:left;
  840. 	background:#c0c0c0;
  841. 	color:#ffffff;
  842. 	padding:3px;
  843. }
  844.  
  845. .txtYoutubeVideoDescription {
  846. 	float:left;
  847. 	background:#c0c0c0;
  848. 	color:#ffffff;
  849. 	padding:3px;
  850. }
  851.  
  852. /* this is a container for the short edit links upon each media object -- Edit Delete */
  853. div.MediaShortEdit {
  854. align:right;
  855.  
  856. }
  857.  
  858. div.MediaShortEdit a:link {
  859. 	color:orange;
  860. 	text-decoration:none;
  861. 	font-family:arial;
  862. 	font-size:10px;
  863.  
  864. }
  865.  
  866. div.MediaShortEdit a:hover {
  867. 	background:Black;
  868. 	color:Orange;
  869. 	text-decoration:underline;
  870. 	font-family:arial;
  871. 	font-size:10px;
  872.  
  873. }
  874.  
  875. div.MediaShortEdit a:visited	{
  876. 	color:orange;
  877. 	text-decoration:none;
  878. 	font-family:arial;
  879. 	font-size:10px;
  880.  
  881. }
  882.  
  883.  
  884.  
  885. /* when a mouse over event is had over a media contet div */
  886. div.DivHighlight {
  887. background:#505050;
  888. border:3px solid #FF0000;
  889. }
  890.  
  891. /* when a user is editing, the media object has this*/
  892. div.DivEdit {
  893. background:#FFFF00;
  894. border:3px solid #008000;
  895. }
  896.  
  897. div.DivSelected {
  898. background:#0000FF;
  899. border:3px solid #ffffff;
  900. }
  901.  
  902.  
  903. /* publishing interface */
  904. div.divColumn {
  905. float:left;
  906.  
  907. }
  908.  
  909. div.divColumnRight {
  910. float:right;
  911.  
  912. }
  913.  
  914.  
  915. ul.PublishingWigitBar {
  916. 	align:right;;
  917. 	list-style-type: none;
  918. 	font-size: 12px;
  919. }
  920.  
  921. #PublishSidebar {
  922. 	float:left;
  923. 	width: 240px;
  924. 	margin:10px 10px 0 0;
  925. 	padding-bottom: 14px;
  926. 	font-size: 11px;
  927. 	color:#000000;
  928.    background-color:#C3F65F;
  929. }
  930.  
  931.  
  932. /*
  933. li.PublishingWigitBar  {
  934. 	list-style-type: none;
  935. 	font-size: 12px;
  936. }*/
  937.  
  938.  
  939.  
  940.  
  941.  
  942. div.divBackgroundImage {
  943.  
  944. }
  945.  
  946. div.cboBackgrounds {
  947.  
  948. }
  949.  
  950. img.imgBackground {
  951.  
  952. }
  953.  
  954.  
  955.  
  956. div.txtFileDescription {
  957.  
  958. }
  959.  
  960. div.ImageFileDescription {
  961.  
  962. }
  963.  
  964. /* HOME Page */
  965. div.HomePageMediaStatistics {
  966. float:left;
  967. background:#c0c0c0;
  968. color:#000000;
  969. margin:10px;
  970. padding:10px;
  971. }
  972.  
  973. div.HomePageMessageStatistics {
  974. float:left;
  975. background:#c0c0c0;
  976. color:#000000;
  977. margin:10px;
  978. padding:10px;
  979.  
  980. }
  981.  
  982. /* The following definitions are used for the people display.
  983.    It is a summary of information about each user, displaying 
  984.    a small portrait, their alias, top likes and a one hundred
  985.    character teaser about them. */
  986.  
  987.  
  988. div.PersonContainer {
  989. 	width:500px;
  990. 	height:100%;
  991. 	margin:15px 0 0 8px;
  992. 	color:#000;
  993. 	color:#000000;
  994.     background-color:#C0C0C0;
  995. }
  996.  
  997. div.Person{
  998. 	padding-top:5px;
  999. 	width:100%;
  1000. 	height:100px;
  1001. 	border-bottom: dotted 2px #999;
  1002. }
  1003.  
  1004. div.PersonHighlight{
  1005. 	background-color:#0000CC;
  1006. 	border: dotted 2px #FF0000;
  1007. }
  1008.  
  1009. div.PersonSelected {
  1010. 	float:left;
  1011. 	width: 30px;
  1012. 	margin:0px 10px 0 0;
  1013. 	padding-bottom: 4px;
  1014. 	font-size: 11px;
  1015. }
  1016.  
  1017. div.PersonAlias {
  1018. 	float:left;
  1019. 	width: 30px;
  1020. 	margin:0px 10px 0 0;
  1021. 	padding-bottom: 4px;
  1022. 	font-size: 11px;
  1023. }
  1024.  
  1025.  
  1026. div.PersonTeaser {
  1027. 	float:left;
  1028. 	width: 200px;
  1029. 	margin:0px 10px 0 0;
  1030. 	padding-bottom: 4px;
  1031. 	font-size: 11px;
  1032. }
  1033.  
  1034. div.PersonPortraitContainer {
  1035.  	float:left;
  1036. 	width: 100px;
  1037. 	margin:0px 10px 0 0;
  1038. 	padding-bottom: 4px;
  1039. 	font-size: 11px;
  1040. }
  1041.  
  1042. div.PersonImg {
  1043.  	float:left;
  1044. 	width: 100px;
  1045. 	margin:0px 10px 0 0;
  1046. 	padding-bottom: 4px;
  1047. 	font-size: 11px;
  1048. }
  1049.  
  1050. div.PersonLikes {
  1051. 	float:left;
  1052. 	width: 150px;
  1053. 	margin:0px 10px 0 0;
  1054. 	padding-bottom: 4px;
  1055. 	font-size: 11px;
  1056. }
  1057.  
  1058.  
  1059.  
  1060. .wrapper{
  1061.    position: relative;
  1062.    float: left;
  1063.    left: 0px;
  1064.    width: 987px;
  1065.    margin-bottom: 10px;
  1066.    background-color: rgb(204, 204, 204)
  1067. }
  1068.  
  1069. #eft1{
  1070.    position: relative;
  1071.    float: left;
  1072.    left: 5px;
  1073.    width: 200px;
  1074.    height: 319px;
  1075. }
  1076. #PanelDialogWrapper{
  1077.    position: relative;
  1078.    float: left;
  1079.    left: 15px;
  1080.    width: 486px;
  1081.    height: 319px;
  1082. }
  1083.  
  1084.  
  1085.  
  1086. /* Calendar Page */
  1087. #calendarWrapper {
  1088.     float:left;
  1089. 	padding:5px 0 0 0;
  1090. 	width:300px;
  1091. 	background:#000066;
  1092.     border: 1px solid #999;
  1093. 	font: normal 12pt "Arial", "Helvetica", "Sans Serif"; 
  1094.  }
  1095.  
  1096. #calendarWrapper a:link { 
  1097. 	 color: #004400; 
  1098. 	 text-decoration: none;
  1099. }		
  1100. #calendarWrapper a:visited {
  1101. 	color: #004400; 
  1102. 	text-decoration: none;
  1103. }	
  1104. #calendarWrapper a:hover {
  1105. 	color: #004400; 
  1106. 	text-decoration: underline;
  1107. }	/* mouse over link */
  1108.  
  1109. #calendarWrapper a:active {
  1110. 	color: #004400; 
  1111. 	text-decoration: none;
  1112. }		/* selected link */
  1113.  
  1114. div.calendarMain {
  1115. float:left;
  1116. 	border:10px;
  1117. 	font: normal 12pt "Arial", "Helvetica", "Sans Serif"; 
  1118. }  
  1119.  
  1120. div.calendarNavigation {
  1121. 	width:365px;
  1122.    height:30px;
  1123. 	float:left;
  1124. 	background: #000000;	
  1125. }
  1126.  
  1127. div.calendarTitle {
  1128. 	float:left;
  1129. 	width:180px;
  1130. 	color:#FFFFFF;
  1131. 	padding:5px;
  1132. 	background: #000000;	
  1133. }  
  1134.  
  1135. div.calendarButtons {
  1136. 	align:center;
  1137. 	float:left;
  1138. 	width:30px;
  1139. 	padding:5px;
  1140. 	color:#FFFFFF;
  1141. 	background: #000000;
  1142. }
  1143.  
  1144. div.calendarButtons a:link {
  1145. 	color:white;
  1146. 	text-decoration:none;
  1147.  
  1148. }
  1149.  
  1150. div.calendarButtons a:hover {
  1151. 	background:white;
  1152. 	color:black;
  1153. }
  1154.  
  1155. div.calendarButtons a:visited	{
  1156. 	color:white;
  1157. 	text-decoration:none;
  1158.  
  1159. }
  1160.  
  1161.  
  1162.  
  1163. div.calendarDayOfWeek  {
  1164. 	align:center;
  1165. 	float:left;
  1166. 	width:30px;
  1167.    height:20px;
  1168.    padding:10px;
  1169.  
  1170. 	color:#FFFFFF;
  1171. 	background: #000000;
  1172. 	border: 1px solid #000000;
  1173.  
  1174. }
  1175.  
  1176.  
  1177. div.calendarNotDayRange {
  1178. float:left;
  1179. width:30px;
  1180. height:20px;
  1181. text-align:center;
  1182. padding:10px;
  1183. background:#666666;
  1184. border: 1px solid #000;
  1185. }
  1186.  
  1187. div.calendarEventCurrentDay {
  1188. float:left;
  1189. width:30px;
  1190. height:20px;
  1191. text-align:center;
  1192. padding:10px;
  1193. background:#AAFFAA;
  1194. border: 1px solid #000;
  1195. }
  1196.  
  1197. div.calendarEvent {
  1198. float:left;
  1199. width:30px;
  1200. height:20px;
  1201. text-align:center;
  1202. padding:10px;
  1203. background:#FFFFC8;
  1204. border: 1px solid #000;
  1205. }
  1206.  
  1207. div.calendarNormalDay {
  1208. float:left;
  1209. width:30px;
  1210. height:20px;
  1211. text-align:center;
  1212. padding:10px;
  1213. background:#DDFFFF;
  1214. color:#000000;
  1215. border: 1px solid #000;
  1216. }
  1217.  
  1218. div.calendarShowCurrentDay {
  1219. float:left;
  1220. width:30px;
  1221. height:20px;
  1222. text-align:center;
  1223. padding:10px;
  1224.  
  1225. background:#C8C896;
  1226. border: 1px solid #000;
  1227. }
  1228.  
  1229.  
  1230.  
  1231. /* these items are part of the user interface and validation information */
  1232. p.UserError {
  1233. color:#FF0000;
  1234. }
  1235.  
  1236. #display {
  1237. float:left;
  1238. width:75%;
  1239. }
  1240.  
  1241.  
  1242. /* these are used for popup editing. The blanket covers the 
  1243.    page while the information is being edited. */
  1244. #blanket {
  1245.  background-color:#111;
  1246.  opacity: 0.65;
  1247.  filter:alpha(opacity=65);
  1248.  position:absolute;
  1249.  z-index: 9001;
  1250.  top:0px;
  1251.  left:0px;
  1252.  width:100%;
  1253.  }
  1254.  #popUpDiv {
  1255.  position:relative;
  1256.  background-color:#eeeeee;
  1257.  width:300px;
  1258.  height:300px;
  1259.  z-index: 9002;
  1260.  }
  1261.  
  1262.  

index.html

index.html
HTML
  1. <html>
  2. <head>
  3. 	<title>AtlPlay.com - Atlanta, Georgia's Socialization Network</title>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<meta name="Author" content="Anthony Matarazzo" />
  6. 	<link rel='stylesheet' media="screen" type='text/css' href='main.css' />
  7.  
  8. </head>
  9.  
  10. <body id="home" onLoad="document.frmLogin.Alias.focus();">
  11. <div id="wrapper">
  12.  
  13. <div id="masthead">
  14.  
  15. <a href="home"><img src="img/Welcome.png" alt="AtlPlay.com - Atlanta, Georgia's Socialization Network" /></a>
  16. <h1>Welcome to AtlPlay.com</h1>
  17. <h2>Atlanta, Georgia's community socialization network</h2>
  18.  
  19. </div>	
  20.  
  21. <!--------------------- main content ---------------->
  22.  
  23. <div id="content">
  24.  
  25. <div id="blog">
  26. <p>Dear valued Web Guest:</p><br>
  27.  
  28. <p>Welcome to AtlPlay.com - the place for community gatherings. AtlPlay.com is a community 
  29. socialization and information publishing website. The web software enables digital communication between many 
  30. anonymous members. For the <i>nominal fee of one dollar</i>, you can establish a membership. Unless you give your full 
  31. name or location, other members will not be able to gather your personal identity information. 
  32. Each member does have a personal identity and is required to join using a credit card. This site 
  33. uses PayPal.com for secure payment. Therefore, absolutely none of your financial data is stored 
  34. or transferred to AtlPlay.com. Feel confident that other members are respected as you are for 
  35. their investment.</p>
  36.  
  37. <p>The web application software you get enables much more than messaging. 
  38. The software enables easy publishing of many types of document and media data. For versatility, 
  39. you may publish a link that others can view an individual document or group of documents. An 
  40. intuitive interface enables a member to publish a web presentation. Information can be published 
  41. just for members or for anyone in the world. You can specify a password for viewers to enter 
  42. before they have access.</p>
  43.  
  44.  
  45. <p>AtlPlay.com allows users to create or upload many formats of 
  46. digital data. Unicode Text (Standard documentation), books, music, music albums, 
  47. photographs, computer animations and video. Each of these formats are industry 
  48. accepted open formats so the information is compatible with many computing platforms. 
  49. It is desired that no pornography be distributed upon the website. By becoming 
  50. a member, you agree to this policy. </p>
  51.  
  52. <p>AtlPlay.com is a social digital communication system implemented 
  53. for inspiring positive thoughts. To account for the many moods that people experience, be 
  54. prepared to exercise good behavior. Textual communication, if it contains very offensive 
  55. language, can hurt people-s feelings. Each member is a real person, with emotions. 
  56. Please use courteous greetings and sensible communication practices. Enjoy, learn 
  57. and bring Internet communication to a higher level.</p>
  58. </div>
  59.  
  60. <!--------------------- Sidebar - login or create new ---------------->
  61.  
  62. <div class="sidebar">
  63. <h2>Member Login</h2>
  64. <form name="frmLogin" method="post" enctype="application/x-www-form-urlencoded" action="checklogin.php">
  65. <label>Alias</label><input name="Alias" type="text" id="Alias"><br>
  66. <label>Password</label><input name="xID" type="password" id="xID"><br>
  67. <input type="submit" name="Submit" value="Login" onclick="frmLogin.action='checklogin.php';">
  68. <input type="submit" name="Submit" value="New Member" onclick="frmLogin.action='memberAlias.php';">
  69. </form>
  70. </div>
  71.  
  72. <div class="spacer"></div>
  73.  
  74. <div class="flourish"></div>
  75.  
  76. </div>
  77.  
  78. <!--------------------- The footer of the page ---------------->
  79. <div id="footer">
  80.  
  81. 	<div class="spacer"></div>
  82.  
  83. </div>
  84.  
  85. </div>
  86. </body>
  87. </html>
  88.  
  89.  
  90.  
  91.  

AddNewMedia.php

AddNewMedia.php
PHP
  1. <?php
  2. session_start();
  3. require_once('MediaDatabase.php');
  4.  
  5. $_SESSION['MEDIAFUNCTIONPROCESSED']=0;
  6.  
  7. ?>
  8. <html>
  9. <head>
  10. 	<script src="js/dw_loader.js" type="text/javascript"></script>
  11. 	<script type="text/javascript" src="ckEditor/ckeditor.js"></script>
  12. <link rel='stylesheet' media="screen" type='text/css' href='main.css' />
  13.  
  14. </head><body>
  15.  
  16. <?php
  17.  
  18.  
  19. function outputFileUploadControl() {
  20.  
  21. 	$max_no_img=4;  // Maximum number of images value to be set here
  22. 	echo "<div class=\"ImageUploadPanel\">";
  23.  
  24. 	for($i=1; $i<=$max_no_img; $i++){
  25. 	echo '<div class="ImageUploadLabel">File ' . $i . '</div>';
  26. 	echo '<div class="ImageFileUpload"><input type="file" name="files[]" id="files[]" class="bginput"></input></div>';
  27.  
  28. 	echo '<div class="ImageFileShort"><input name="txtShortDescription[]" maxlength=100></input></div>';
  29. 	echo '<div class="ImageFileDescription"><textarea name="txtFileDescription[]" id="txtFileDescription[]" rows="4" cols="30"></textarea></div>';
  30. 	}
  31. 	echo '</div>';
  32.  
  33. }
  34.  
  35.  
  36. $oMedia=new Media();
  37. $oMedia->setMemberID($_SESSION['MemberID']);
  38.  
  39. $oMedia->outputQuotaUsage();
  40.  
  41.  
  42.  
  43. ?>
  44.  
  45. <form action="" method="post" enctype="multipart/form-data" name="frmMedia" id="frmMedia">
  46.  
  47. <div id="PanelDialogWrapper">
  48. <!--------------------- main content ---------------->
  49.  
  50. <h2>Add Media</h2>
  51. <p>Select what type of media you are adding:<br></p>
  52.  
  53. <select id=cboMediaType onclick="ShowMediaPanel(this.value);" onchange="ShowMediaPanel(this.value);">
  54.  
  55. <option name="MediaType" value="BLOG">Blog</option>
  56. <option name="MediaType" value="TEXT">Text</option>
  57. <option name="MediaType" value="IMAGE">Photograph</option>
  58. <option name="MediaType" value="MUSIC">Music</option>
  59. <option name="MediaType" value="VIDEO">Video</option>
  60. <option name="MediaType" value="YOUTUBE">Youtube Video Gallery</option>
  61. <option name="MediaType" value="IMAGE_GALLERY">Picture Gallery</option>
  62. <option name="MediaType" value="RSS_FEED">RSS Feed</option>
  63. </select>
  64.  
  65.  
  66.  
  67. <!----------------------------------------------------->
  68. <div id="BLOG" class="PanelDialog">
  69. <h3>Blog Entry</h3>
  70. <p>Please label the blog text block and then type in the text that you want to store.</p>
  71.  
  72. <label for="txtLabel">Item Label</label>
  73. <input type="text" maxlength=100 name="txtBlogLabel" id="txtBlogLabel">
  74.  
  75. <label for="txtInformation">Textual Information</label>
  76. <textarea cols="50" id="txtBlogInformation" name="txtBlogInformation" rows="10"></textarea>
  77.  
  78. <div class="PanelDialogButtons">
  79. <input class="CommandButton" id=cmdCancel type="button" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  80. <input class="CommandButton" id=cmdSave type="submit" value="Save" onClick="frmMedia.action='SaveMedia.php?FUNCTION=BLOG';frmMedia.submit();"/>
  81. </div>
  82. </div>
  83.  
  84.  
  85. <div id="TEXT" class="PanelDialog">
  86. <h3>Text</h3>
  87. <p>Please label the text block and then type in the text that you want to store.</p>
  88.  
  89. <label for="txtLabel">Item Label</label>
  90. <input type="text" maxlength=100 name="txtLabel" id="txtLabel">
  91.  
  92. <label for="txtInformation">Textual Information</label>
  93. <textarea cols="50" id="txtInformation" name="txtInformation" rows="10"></textarea>
  94.  
  95. <div class="PanelDialogButtons">
  96. <input class="CommandButton" id=cmdCancel type="button" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  97. <input class="CommandButton" id=cmdSave type="submit" value="Save" onClick="frmMedia.action='SaveMedia.php?FUNCTION=TEXT';frmMedia.submit();"/>
  98. </div>
  99. </div>
  100.  
  101. <!----------------------------------------------------->
  102. <div id="IMAGE" class="PanelDialog">
  103.  
  104. <h3>Photographs</h3>
  105. <p>Select the image files you wish to upload.</p>
  106.  
  107. <!------------------------------------------------------------------->
  108. <!------------- set the ienctype='multipart/form-data'  ------->
  109. <!------------------------------------------------------------------->
  110. <?php
  111. outputFileUploadControl();
  112.  
  113. ?>
  114. <div class="PanelDialogButtons">
  115. <input class="CommandButton" type="button" class="cmdCancel" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  116. <input class="CommandButton" type="submit" class="cmdSave" value="Save" onClick="frmMedia.action='SaveMedia.php?FUNCTION=IMAGE';frmMedia.submit();"/>
  117. </div>
  118. </div>
  119.  
  120. <div id="MUSIC" class="PanelDialog">
  121. <!------------------------------------------------------------------->
  122. <!------------- set the ienctype='multipart/form-data'  ------->
  123. <!------------------------------------------------------------------->
  124. <h3>Music</h3>
  125. <p>Please select the music files (.mp3) you want to upload.</p>
  126.  
  127. <?php
  128. outputFileUploadControl();
  129.  
  130. ?>
  131. <div class="PanelDialogButtons">
  132.  
  133. <input class="CommandButton" type="button" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  134. <input class="CommandButton" type="submit" value="Save" onClick="frmMedia.action='SaveMedia.php?FUNCTION=AUDIO';frmMedia.submit();"/>
  135. </div>
  136.  
  137. </div>
  138.  
  139. <!------------------------------------------------------------------->
  140. <!------------- set the ienctype='multipart/form-data'  ------->
  141. <!------------------------------------------------------------------->
  142. <div id="VIDEO" class="PanelDialog">
  143. <h3>Video</h3>
  144. <p>Please select the video files (.mp3) you want to upload.</p>
  145.  
  146. <?php
  147. outputFileUploadControl();
  148. ?>
  149.  
  150. <div class="PanelDialogButtons">
  151.  
  152. <input class="CommandButton" type="button" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  153. <input class="CommandButton" type="submit" value="Save" onClick="frmMedia.action='SaveMedia.php?FUNCTION=VIDEO';frmMedia.submit();"/>
  154. </div>
  155.  
  156. </div>
  157.  
  158.  
  159. <!------------------------------------------------------------------->
  160. <!------------- Youtube video player integration         ------->
  161. <!------------------------------------------------------------------->
  162. <div id="YOUTUBE" class="PanelDialog">
  163.  
  164. <label for="txtLabel">Youtube Video ID or complete URL</label>
  165. <input type="text" maxlength=100 name="txtYoutubeLabel" id="txtYoutubeLabel"/>
  166.  
  167. <label for="txtYouTube">Short Description</label>
  168. <input type="text" maxlength=100 name="txtYoutubeShortDescription" id="txtYoutubeShortDescription"/>
  169.  
  170.  
  171. <label for="txtInformation">Description</label>
  172. <textarea cols="80" id="txtYoutubeVideoDescription" name="txtYoutubeVideoDescription" rows="10"></textarea>
  173.  
  174. <div class="PanelDialogButtons">
  175. <input class="CommandButton" type="button" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  176. <input class="CommandButton" type="submit" value="Save" onClick="frmMedia.action='SaveMedia.php?FUNCTION=YOUTUBE';frmMedia.submit();"/>
  177. </div>
  178.  
  179. </div>
  180.  
  181.  
  182. <!------------------------------------------------------------------->
  183. <!------------- Youtube video player integration         ------->
  184. <!------------------------------------------------------------------->
  185. <div id="IMAGE_GALLERY" class="PanelDialog">
  186. <h3>Photograph Gallery</h3>
  187. <p>Please select which images you would like in the the Gallery</p>
  188.  
  189. <label for="txtGalleryName">Gallery Name</label>
  190. <input type="text" maxlength=100 name="txtGalleryName" id="txtGalleryName">
  191.  
  192.  
  193. <?php
  194. $oMedia->outputMediaImageList("");
  195. ?>
  196.  
  197.  
  198. <div class="PanelDialogButtons">
  199. <input class="CommandButton" type="button" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  200. <input class="CommandButton" type="submit" value="Save" onClick="frmMedia.action='SaveMedia.php?FUNCTION=IMAGE_GALLERY'; frmMedia.submit();"/>
  201. </div>
  202.  
  203. </div>
  204.  
  205.  
  206. <!------------------------------------------------------------------->
  207. <!------------- Youtube video player integration         ------->
  208. <!------------------------------------------------------------------->
  209. <div id="RSS_FEED" class="PanelDialog">
  210. <label for="txtLabel">RSS Feed Name</label>
  211. <input type="text" maxlength=100 name="txtRSSFeedName" id="txtRSSFeedName">
  212.  
  213. <label for="txtLabel">Complete URL of RSS Feed</label>
  214. <input type="text" maxlength=1024 name="txtRSSFeedURL" id="txtRSSFeedURL">
  215.  
  216. <label for="txtInformation">Description</label>
  217. <textarea cols="80" id="txtRSSDescription" name="txtYoutubeVideoDescription" rows="10"></textarea>
  218.  
  219. <div class="PanelDialogButtons">
  220. <input  class="CommandButton" type="button" value="Cancel" onClick="loadExternalDoc('Media.php','display');"/>
  221. <input  class="CommandButton" type="submit" value="Save" onClick="frmMedia.action='SaveMedia.php?RSS_FEED';frmMedia.submit();"/>
  222. </div>
  223.  
  224. </div>
  225.  
  226. </form>
  227.  
  228. <!-------------------
  229. <option name="MediaType" value="Survey">Survey</option>
  230. -------------------->
  231.  
  232.  
  233.  
  234. </div> <!--wrapper--->
  235.  
  236.  
  237. </body></html>

Calendar.php

Calendar.php
PHP
  1. <?php
  2. session_start();
  3. require_once('CalendarDatabase.php');
  4.  
  5. unset($function);
  6. if(isset($_GET)) {
  7. 	$function=$_GET["FUNCTION"];
  8. } 
  9.  
  10. $oCalendar=new Calendar();
  11. $oCalendar->setMemberID($_SESSION['MemberID']);
  12. $sTextInfo="";
  13.  
  14. if(isset($_SESSION['calDay'])) {
  15. 	$day = $_SESSION['calDay'];
  16. 	$month = $_SESSION['calMonth'];
  17. 	$year = $_SESSION['calYear'];
  18. } else {
  19. 	$date =time();  //This puts the day, month, and year in seperate variables 
  20. 	$day = date('d', $date); 
  21. 	$month = date('m', $date); 
  22. 	$year = date('Y', $date);
  23.  
  24. }
  25.  
  26.  
  27. switch($function) {
  28. case 'EDIT':
  29.  $sTextInfo=$oCalendar->getInformation($_GET["Date"]);
  30. break;
  31.  
  32. case 'SAVE':
  33.  $sTextInfo=$_POST['txtCalendarInfo'];
  34.  $oCalendar->saveInformation($_POST['hidDate'], $_POST['txtCalendarInfo']);
  35.  $sTextInfo=$oCalendar->getInformation($_POST['hidDate']);
  36. break;
  37.  
  38. case 'DELETE':
  39.  $oCalendar->deleteInformation($_POST['hidDate']);
  40. break;
  41.  
  42. case "PrevYear":
  43. 	$year--;
  44. break;
  45.  
  46. case "PrevMonth":
  47. 	$month--;
  48. 	if($month<1) {
  49. 		$month=12;
  50. 		$year--;
  51. 	}
  52. break;
  53.  
  54. case "NextMonth":
  55. 	$month++;
  56. 	if($month>12) {
  57. 		$month=1;
  58. 		$year++;
  59. 	}
  60. break;
  61.  
  62. case "NextYear":
  63. 	$year++;
  64. break;
  65.  
  66. }
  67.  
  68. /* store the current date context in theothe session */
  69. $_SESSION['calDay'] = $day;
  70. $_SESSION['calMonth']=$month;
  71. $_SESSION['calYear']=$year;
  72.  
  73. ?>
  74.  
  75.  
  76. <div id="wrapper">
  77.  <div class="content">