Requirement: XThreads
This is a very simple example for creating a Restaurant Review section on our forum.
Because I don't have much idea for the design, so I use the Comp Specs, Usermaps and adopt the Author Rating layout for this
Just modify it as our needs.
Create/edit a forum:
AdminCP -> Forums & Posts -> Forum Management:
Template Prefix: resrev_
Show first post on every showthread page: Yes
Enable XThreads' Inline Forum Search: Yes
Create a Custom Thread Fields:
AdminCP -> Configuration -> Custom Thread Fields
Option Buttons for Food Rating
Title: Food
Key: resrev_food
Applicable Forums: select our Restaurant Review forum
Input Field Type: Option Buttons
Values List:
Modify it as our needs
Editable by / Required Field?: Everyone (required)
Display Order: 1
Allow Filtering: Yes
Display Format:
Modify it as our needs.
Underlying Data Type: Integer (unsigned)
Formatting Map List:
Value: 1
Displayed Output: 20
Value: 2
Displayed Output: 40
Value: 3
Displayed Output: 60
Value: 4
Displayed Output: 80
Value: 5
Displayed Output: 100
Use Custom Input HTML: Yes
Input Field HTML:
Option Buttons for Service Rating
Title: Service
Key: resrev_service
Applicable Forums: select our Restaurant Review forum
Input Field Type: Option Buttons
Values List:
Modify it as our needs
Editable by / Required Field?: Everyone (required)
Display Order: 2
Allow Filtering: Yes
Display Format:
Modify it as our needs.
Underlying Data Type: Integer (unsigned)
Formatting Map List:
Value: 1
Displayed Output: 20
Value: 2
Displayed Output: 40
Value: 3
Displayed Output: 60
Value: 4
Displayed Output: 80
Value: 5
Displayed Output: 100
Use Custom Input HTML: Yes
Input Field HTML:
Option Buttons for Atmosphere Rating
Title: Atmosphere
Key: resrev_atm
Applicable Forums: select our Restaurant Review forum
Input Field Type: Option Buttons
Values List:
Modify it as our needs
Editable by / Required Field?: Everyone (required)
Display Order: 3
Allow Filtering: Yes
Display Format:
Modify it as our needs.
Underlying Data Type: Integer (unsigned)
Formatting Map List:
Value: 1
Displayed Output: 20
Value: 2
Displayed Output: 40
Value: 3
Displayed Output: 60
Value: 4
Displayed Output: 80
Value: 5
Displayed Output: 100
Use Custom Input HTML: Yes
Input Field HTML:
Option Buttons for Value Rating
Title: Value
Key: resrev_value
Applicable Forums: select our Restaurant Review forum
Input Field Type: Option Buttons
Values List:
Modify it as our needs
Editable by / Required Field?: Everyone (required)
Display Order: 4
Allow Filtering: Yes
Display Format:
Modify it as our needs.
Underlying Data Type: Integer (unsigned)
Formatting Map List:
Value: 1
Displayed Output: 20
Value: 2
Displayed Output: 40
Value: 3
Displayed Output: 60
Value: 4
Displayed Output: 80
Value: 5
Displayed Output: 100
Use Custom Input HTML: Yes
Input Field HTML:
Textbox for Location
Title: Location
Key: resrev_location
Applicable Forums: select our Restaurant Review forum
Input Field Type: Textbox
Editable by / Required Field?: Everyone (required)
Display Order: 5
Hide Input Field: Yes
Use Custom Input HTML: Yes
Input Field HTML:
Textbox for Geo Location
We'll try to map the restaurant location.
Title: Geo Location
Key: resrev_geo
Applicable Forums: select our Restaurant Review forum
Input Field Type: Textbox
Editable by / Required Field?: Everyone
This is not a required field.
Display Order: 6
Display Format:
Text Mask Filter: Custom (regex)
Modify it as our needs.
File for restaurant Photo
Title: Photo
Key: resrev_photo
Applicable Forums: select our Restaurant Review forum
Input Field Type: File
Valid File Extensions: jpg|jpeg|gif|png
Maximum File Size: 204800
Modify it as our needs.
Editable by / Required Field?: Everyone (required)
Display Order: 7
Only Accept Image Files: Yes
Image Thumbnail Generation: 120x90|200x150
Display Format:
We need to create new templates in Global Template.
Admin CP -> Templates & Style -> Templates -> Global Templates:
resrev_forumdisplay_threadlist
resrev_forumdisplay_thread
resrev_postbit_first
resrev_editpost_first
HTML Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
<html>
<head>
<title> {$mybb->settings['bbname']} - {$lang->edit_post}</title>
{$headerinclude}
<script type = "text/javascript" src = "jscripts/post.js?ver=1400" > </script>
<script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?sensor=false" > </script>
<script type = "text/javascript" >
var geocoder, map, map2;
function initialize( ) {
geocoder = new google.maps.Geocoder( ) ;
var myLatlng2 = new google.maps.LatLng{ $GLOBALS[ 'tplvars' ] [ 'resrev_geo' ] } ;
var myOptions2 = {
zoom: 4 ,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map( document.getElementById( 'map_geol' ) , myOptions2) ;
var marker2 = new google.maps.Marker( {
position: myLatlng2,
map: map2,
title:"{$thread['subject']}"
} ) ;
var myLatlng = new google.maps.LatLng{ $GLOBALS[ 'tplvars' ] [ 'resrev_geo' ] } ;
var myOptions = {
zoom: 4 ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( document.getElementById( 'map_postbit' ) , myOptions) ;
var marker = new google.maps.Marker( {
position: myLatlng,
map: map
} ) ;
}
function codeAddress( ) {
var address = document.getElementById( 'xthreads_resrev_location' ) .value;
geocoder.geocode( { 'address' : address} , function ( results, status) {
if ( status = = google.maps.GeocoderStatus.OK) {
var mylocation = results[ 0 ] .geometry.location;
map2.setCenter( mylocation) ;
var marker3 = new google.maps.Marker( {
map: map2,
position: mylocation
} ) ;
document.getElementsByName( "xthreads_resrev_geo" ) [ 0 ] .value = mylocation;
} else {
alert( "Geocode was not successful for the following reason: " + status) ;
}
} ) ;
}
</script>
</head>
<body onload = " initialize( ) " >
{$header}
{$preview}
{$post_errors}
{$attacherror}
<br />
<form action = "editpost.php?pid={$pid}& processed=1" method = "post" enctype = "multipart/form-data" name = "input" >
<input type = "hidden" name = "my_post_key" value = "{$mybb->post_code}" />
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" style = "border-bottom: none;" >
<tr>
<td class = "thead" colspan = "2" > <strong> {$lang->edit_post}</strong> </td>
</tr>
{$loginbox}
</table>
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" style = "border-top: none; border-bottom: none;" >
<tr>
<td class = "trow2" style = "width: 50%; vertical-align: top;" >
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" >
<tr>
<td class = "trow2" colspan = "2" style = "text-align: center;" >
<div id = "map_geol" style = "width:400px; height:250px;margin: auto auto;" > </div>
{$tfinput['resrev_location']}
</td>
</tr>
</table>
</td>
<td class = "trow2" style = "vertical-align: top;" >
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" >
<tr>
<td class = "trow2" style = "width: 20%; white-space:nowrap;" > <strong> {$lang->subject}</strong> </td>
<td class = "trow2" style = "white-space:nowrap;" > {$prefixselect}<input type = "text" class = "textbox" name = "subject" size = "40" maxlength = "85" value = "{$subject}" tabindex = "1" /> </td>
</tr>
{$extra_threadfields}
</table>
</td>
</tr>
</table>
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" style = "border-top: none;" >
{$posticons}
<tr>
<td class = "trow2" valign = "top" style = "width: 20%;" > <strong> {$lang->your_message}:</strong> <br /> <div style = "text-align: center;" > {$smilieinserter}</div> </td>
<td class = "trow2" >
<textarea name = "message" id = "message" rows = "20" cols = "70" tabindex = "3" > {$message}</textarea>
{$codebuttons}
</td>
</tr>
<tr>
<td class = "trow1" valign = "top" > <strong> {$lang->post_options}</strong> </td>
<td class = "trow1" > <span class = "smalltext" >
<label> <input type = "checkbox" class = "checkbox" name = "postoptions[signature]" value = "1" tabindex = "6" {$postoptionschecked['signature']} /> {$lang->options_sig}</label>
{$disablesmilies}</span>
</td>
</tr>
{$subscriptionmethod}
{$pollbox}
</table>
{$attachbox}
<br />
<div align = "center" > <input type = "submit" class = "button" name = "submit" value = "{$lang->update_post}" tabindex = "3" accesskey = "s" /> <input type = "submit" class = "button" name = "previewpost" value = "{$lang->preview_post}" tabindex = "4" /> </div>
<input type = "hidden" name = "action" value = "do_editpost" />
<input type = "hidden" name = "posthash" value = "{$posthash}" />
<input type = "hidden" name = "attachmentaid" value = "" />
<input type = "hidden" name = "attachmentact" value = "" />
</form>
<br />
<form action = "editpost.php" method = "post" name = "editpost" >
<input type = "hidden" name = "my_post_key" value = "{$mybb->post_code}" />
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" >
<tr>
<td class = "thead" colspan = "3" > <strong> {$lang->delete_post}</strong> </td>
</tr>
<tr>
<td class = "trow1" style = "white-space: nowrap" > <input type = "checkbox" class = "checkbox" name = "delete" value = "1" tabindex = "9" /> <strong> {$lang->delete_q}</strong> </td>
<td class = "trow1" width = "100%" > {$lang->delete_1}<br /> <span class = "smalltext" > {$lang->delete_2}</span> </td>
<td class = "trow1" > <input type = "submit" class = "button" name = "submit" value = "{$lang->delete_now}" tabindex = "10" /> </td>
</tr>
</table>
<input type = "hidden" name = "action" value = "deletepost" />
<input type = "hidden" name = "pid" value = "{$pid}" />
</form>
{$footer}
</body>
</html>
resrev_showthread
resrev_newthread
HTML Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
<html>
<head>
<title> {$lang->newthread_in}</title>
{$headerinclude}
<script type = "text/javascript" src = "jscripts/post.js?ver=1400" > </script>
<script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?sensor=false" > </script>
<script type = "text/javascript" >
var geocoder, map, map2;
function initialize( ) {
geocoder = new google.maps.Geocoder( ) ;
var geont = "{$GLOBALS['tplvars']['resrev_geo']}" ;
var myLatlng2 = new google.maps.LatLng{ $GLOBALS[ 'tplvars' ] [ 'resrev_geo' ] } ;
if ( geont = = "" ) {
myLatlng2 = new google.maps.LatLng( 0 , 0 ) ;
}
var myOptions2 = {
zoom: 4 ,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map( document.getElementById( 'map_geol' ) , myOptions2) ;
var marker2 = new google.maps.Marker( {
position: myLatlng2,
map: map2
} ) ;
var myLatlng = new google.maps.LatLng{ $GLOBALS[ 'tplvars' ] [ 'resrev_geo' ] } ;
var myOptions = {
zoom: 4 ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( document.getElementById( 'map_postbit' ) , myOptions) ;
var marker = new google.maps.Marker( {
position: myLatlng,
map: map
} ) ;
}
function codeAddress( ) {
var address = document.getElementById( 'xthreads_resrev_location' ) .value;
geocoder.geocode( { 'address' : address} , function ( results, status) {
if ( status = = google.maps.GeocoderStatus.OK) {
var mylocation = results[ 0 ] .geometry.location;
map2.setCenter( mylocation) ;
var marker3 = new google.maps.Marker( {
map: map2,
position: mylocation
} ) ;
document.getElementsByName( "xthreads_resrev_geo" ) [ 0 ] .value = mylocation;
} else {
alert( "Geocode was not successful for the following reason: " + status) ;
}
} ) ;
}
</script> </head>
<body onload = " initialize( ) " >
{$header}
{$preview}
{$thread_errors}
{$attacherror}
<form action = "newthread.php?fid={$fid}& processed=1" method = "post" enctype = "multipart/form-data" name = "input" >
<input type = "hidden" name = "my_post_key" value = "{$mybb->post_code}" />
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" style = "border-bottom: none;" >
<tr>
<td class = "thead" colspan = "2" > <strong> {$lang->post_new_thread}</strong> </td>
</tr>
{$loginbox}
</table>
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" style = "border-top: none; border-bottom: none;" >
<tr>
<td class = "trow2" style = "width: 50%; vertical-align: top;" >
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" >
<tr>
<td class = "trow2" colspan = "2" style = "text-align: center;" >
<div id = "map_geol" style = "width:400px; height:250px;margin: auto auto;" > </div>
{$tfinput['resrev_location']}
</td>
</tr>
</table>
</td>
<td class = "trow2" style = "vertical-align: top;" >
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" >
<tr>
<td class = "trow2" style = "width: 20%; white-space:nowrap;" > <strong> {$lang->thread_subject}</strong> </td>
<td class = "trow2" style = "white-space:nowrap;" > {$prefixselect}<input type = "text" class = "textbox" name = "subject" size = "40" maxlength = "85" value = "{$subject}" tabindex = "1" />
</td>
</tr>
{$extra_threadfields}
</table>
</td>
</tr>
</table>
<table border = "0" cellspacing = "{$theme['borderwidth']}" cellpadding = "{$theme['tablespace']}" class = "tborder" style = "border-top: none;" >
{$posticons}
<tr>
<td class = "trow2" valign = "top" style = "width: 20%;" > <strong> {$lang->your_message}</strong> {$smilieinserter}</td>
<td class = "trow2" >
<textarea name = "message" id = "message" rows = "20" cols = "70" tabindex = "2" > {$message}</textarea>
{$codebuttons}
{$multiquote_external}
</td>
</tr>
<tr>
<td class = "trow1" valign = "top" > <strong> {$lang->post_options}</strong> </td>
<td class = "trow1" > <span class = "smalltext" >
<label> <input type = "checkbox" class = "checkbox" name = "postoptions[signature]" value = "1" tabindex = "7" {$postoptionschecked['signature']} /> {$lang->options_sig}</label>
{$disablesmilies}</span> </td>
</tr>
{$modoptions}
{$subscriptionmethod}
{$pollbox}
{$captcha}
</table>
{$attachbox}
<br />
<div style = "text-align:center" > <input type = "submit" class = "button" name = "submit" value = "{$lang->post_thread}" tabindex = "4" accesskey = "s" /> <input type = "submit" class = "button" name = "previewpost" value = "{$lang->preview_post}" tabindex = "5" /> {$savedraftbutton}</div>
<input type = "hidden" name = "action" value = "do_newthread" />
<input type = "hidden" name = "posthash" value = "{$posthash}" />
<input type = "hidden" name = "attachmentaid" value = "" />
<input type = "hidden" name = "attachmentact" value = "" />
<input type = "hidden" name = "quoted_ids" value = "{$quoted_ids}" />
<input type = "hidden" name = "tid" value = "{$tid}" />
{$editdraftpid}
</form>
{$forumrules}
{$footer}
</body>
</html>
resrev_postbit_first_classic
That's the basic of our Restaurant Review forum. Just modify it as our needs.
Please tell me if there is something wrong with the code above. I'm still learning.
Screenshots:
1. Threadlist
2. Newthread
3. Showthread