Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2008-01-10 00:07:43

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

[howto] How to build a Client section on your website?

Here’s how to create a client section on your website:

Features:

  • a list of work completed for a client (most recent first)
  • a sidebar that contains links to client-specific content
  • image gallery
  • comprehensive calendar (listing deadlines with titles
    • an abbreviated calendar with upcoming deadlines
    • a contact form for a quick email
    • a list of upcoming deadlines divided by month
    • a list of gallery category links
    • a list of client files
    • a file upload input

Screenshots


How it works

There’s a lot of code, but essentially it works by using ign_password protect and asy_wondertag to feed the client user name into category attributes of various tags that output content. More specifically…

  1. ign_password_protect handles login to allow admittance to a client section
  2. wondertag feeds the client user names into various content tag’s category attribute.
  3. wondertag compares the user name with the category in various places to allow/deny access to content
  4. mdp_calendar provides a visual calendar (both small and large) for the client-specific deadlines
  5. a gallery plugin, like rss-thumpop or aro_slideshow displays client-specific image galleries.
  6. zem_contact_reborn provides a mini contact form
  7. client-specific file links are displayed with file type icons.
  8. sed_afu allows client-specific file uploads to the site and enters them in the db
  9. srh_file_icon adds nice little file-type icons to the file list.

(1) The following plugins are required.

(2) Mootools

You can optionally use mootools or jquery to make the client specific sidebar into a collapsible accordian.

(3) Sections

  • Create a section called “Clients”
  • Create a section called “Calendar”

(4) Page

  • Create a page called “Clients” for the corresponding section
  • Create a page called “Calendar” for the corresponding section

(5) Login

Place a simple login mechanism on the “Client” page

<txp:ign_if_logged_in>
  <txp:output_form form="client-home" />
<txp:else />
  <txp:ign_show_login login_msg="This is the client section contact us for an account" />
</txp:ign_if_logged_in>

(6) Login a login status indicator

somewhere at the top of the page put this code that will provide a welcome message and a logged in user name.

<txp:ign_if_logged_in>
   <div id="navs2" class="left">
      <ul>
         <li><span><strong>Welcome, <txp:ign_user_info type="realname"/></strong></span></li>
         <li><span>You are logged in with the username: <strong><txp:ign_user_info type="name"/></strong></span></li><li><txp:ign_logout_link /></li>
      </ul>
   </div>
</txp:ign_if_logged_in>

(7) the form “client-home” referenced in the above code looks like this…

<txp:glx_if_section_frontpage><!-- checks for section frontpage -->
  <div id="Main">
     <h3>Project Updates</h3>
     <txp:chh_if_data><!-- only outputs the article tag if it has data otherwise say that there's nothing to see -->
       <txp:asy_wondertag><!-- feeds client name into the article category -->
          <txp:article_custom category="<txp:ign_user_info type="name" />" form="article-client" />
       </txp:asy_wondertag>
     <txp:else/>
       <h3>You have no project updates.</h3>
     </txp:chh_if_data>
  </div>
  <txp:output_form form="client-sidebar"/><!-- outputs the entire sidebar -->
<txp:else/>
  <txp:chh_if_data><!-- outputs an article if there is one -->
     <txp:article form="article-client" />
  <txp:else/><!-- if there's no article, outputs a gallery --> 
     <txp:output_form form="client-gallery"/>
  </txp:chh_if_data>
</txp:glx_if_section_frontpage>

(8) the form “article-client” looks like this…

<txp:if_individual_article>
   <txp:asy_wondertag><!-- check client name against article category -->
     <txp:if_article_category name="<txp:ign_user_info type="name" />">
       <div id="Main">
         <txp:hak_article_thumb />
         <h3><txp:title/></h3>
         <txp:body/>
     <txp:else/><!-- if client name and article category dont match up then deny -->
       <txp:output_form form="client-message"/>  
     </txp:if_article_category>
   </txp:asy_wondertag>
</txp:if_individual_article>

<txp:if_article_list>
   <div class="story list">
     <txp:hak_article_thumb />
     <h3><txp:title/></h3>
     <txp:excerpt />
     <txp:permlink link="1"/>
   </div>
</txp:if_article_list>

(9) the form “client-message” looks like this

<h3>The item requested is not part of your account</h3>
<a href="/clients">back</a>

(10) the form “client-sidebar” that appears in “client-home” looks like this…

<div id="sidebar">
   <div id="smallCal"><!-- client specific mini calendar -->
     <txp:asy_wondertag><!-- feeds the client name to the calendar -->
       <txp:mdp_calendar_small time="any" class="calendar" section="clients" category="<txp:ign_user_info type="name" />"/>
     </txp:asy_wondertag>
     <a href="/calendar">view a larger calendar</a><!-- link to a larger calendar -->
   </div>

   <h3 class="trigger">Contact Us</h3><!-- client specific mini contact form -->
   <div class="stretcher">
     <txp:asy_wondertag><!-- feeds client name into from field of mini contact form-->
       <txp:zem_contact to="email@tld.com" subject="Project Inquiry from <txp:ign_user_info type="realname"/>" copysender="yes" form="email-small" />
     </txp:asy_wondertag>
   </div>

   <h3 class="trigger">Upcoming Deadlines</h3><!-- client specific deadlines/dates list -->
   <div class="stretcher">
     <dl>
       <txp:chh_if_data><!-- checks whether tag outputs anything and says "nothing to see" if not -->
         <txp:asy_wondertag><!-- feeds client name to article tag -->
           <txp:article_custom category="<txp:ign_user_info type="name" />" time="future" form="article-archive" limit="9999" sort="posted asc"/>
         </txp:asy_wondertag>
       <txp:else/>
         <dt>You have no deadlines.</dt>
       </txp:chh_if_data>
     </dl>
   </div>
   <h3 class="trigger">Image Galleries</h3>
   <div class="stretcher">
     <txp:chh_if_data><!-- checks whether tag outputs anything and says "nothing to see" if not -->
       <txp:asy_wondertag><!-- feeds client name to category navigation for image galleries -->
         <txp:stw_category_tree cssid="sideNav" start="<txp:ign_user_info type="name" />" onclass="selected" type="image" section="clients"/>
       </txp:asy_wondertag>
     <txp:else/>
       <dl><dt>You have no image galleries.</dt></dl>
     </txp:chh_if_data>
   </div>

   <h3 class="trigger">Files & Proofs</h3><!-- client specific files -->
   <div class="stretcher">
     <txp:chh_if_data>
       <txp:asy_wondertag><!-- feeds client name to file list tag -->
         <txp:file_download_list category="<txp:ign_user_info type="name" />" wraptag="dl" break="" sort="downloads asc" />
       </txp:asy_wondertag>
     <txp:else/>
       <dl><dt>You have no files or proofs.</dt></dl>
     </txp:chh_if_data>
     <txp:asy_wondertag><!-- client specific file upload -->
       <txp:sed_afu moderation="false" check_ip="false" showcats="0" input_wrap="" email_to="email@tld.com" types="jpg,pdf,tif,gif,doc,zip" sizes="10M" txp_user="dale" catroot="<txp:ign_user_info type="name" />" />
     </txp:asy_wondertag>
   </div>
</div>

(11) the form “article-archive” looks like this…

<txp:if_different>
     <dt><a id="<txp:posted format="%m%y" />"></a><txp:posted format="%B %Y" /></dt>
</txp:if_different>
<dd><a href="<txp:permlink />" title="<txp:title />"><strong><txp:posted format="%d"/></strong> / <txp:title /></a></dd>

(12) the form “client-gallery” looks like this…

<txp:asy_wondertag><!-- feeds user name to gallery -->
   <txp:bos_if_cat_parent is="<txp:ign_user_info type="name" />">
     <txp:rss_thumbpop mode="float" orderby="date asc" showfullalt="1" showfullcaption="1" showcaption="0" showalt="0" jpop="1" clickonly="1" showfullcaption="1"  cols="500" limit="28" />
   <txp:else/>
     <txp:output_form form="client-message"/>
   </txp:bos_if_cat_parent>
</txp:asy_wondertag>

(13) File list the form “files” looks like this…

<dd><txp:file_download_link><txp:srh_file_icon displaytype="image" /><txp:file_download_created format="%m.%d.%y" /> /
<txp:file_download_name /> [<txp:file_download_size format="auto" decimals="1" />]
</txp:file_download_link></dd>

(14) Calendar

Add a large calendar to your “calendar” page

<txp:ign_if_logged_in>
   <div id="bigCal">
      <txp:asy_wondertag>
         <txp:mdp_calendar_large time="any" class="calendar" section="clients" category="<txp:ign_user_info type="name" />" />
      </txp:asy_wondertag>
   </div>
<txp:else />
   <txp:ign_show_login login_msg="This section is for existing clients. Contact us if you'd like an account." />
</txp:ign_if_logged_in>

(15) For every Client you must do the following…

  • create a unique file, image and article category with the exact client name
  • create a unique user with no rights with the exact clients name.

All Done!

Bob (as they say) is your father’s brother!

Have fun! I’m sure I’ve left something out, so this write up is subject to change. This represents a lot of work… both on my part and on the part of the devs who’s plugins I’ve plundered (many thanks!).

Thanks to Jeremy Amos for ign_password_protect and endless hours of consulting, also to Els, for helping me textilize the write-up, and Ralph Lombreglia for cajoling me into doing the write-up.

Last edited by mrdale (2008-01-10 18:32:43)

Offline

#2 2008-01-10 00:17:45

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: [howto] How to build a Client section on your website?

My you have been busy, mrdale. Nice write-up, thanks. Looks very easy to follow, even for a tag dunce like me!

Now, if someone would offer to pay me for developing such a site I’d be sure to give it a run-through… :-)

Sadly, I’m not that good!

Last edited by Bloke (2008-01-10 00:18:18)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#3 2008-01-10 00:20:49

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

Re: [howto] How to build a Client section on your website?

How about your site? I’ve often thought that “cock, muff, bumhole” and all those lewd pictures of yourself, should be behind some kind of password protection. LOL.

Offline

#4 2008-01-10 00:27:53

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: [howto] How to build a Client section on your website?

mrdale wrote:

How about your site? I’ve often thought that “cock, muff, bumhole” and all those lewd pictures of yourself, should be behind some kind of password protection. LOL.

lol, well like a good citizen I did actually have a self-imposed content-rating of 14+ on my site at one time, then realised it was pointless because protection systems like Net Nanny were brain dead to bypass. Plus the kids see and hear worse than that on TV! I think…

Last edited by Bloke (2008-01-10 00:29:15)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#5 2008-01-10 02:03:08

hcgtv
Plugin Author
From: Key Largo, Florida
Registered: 2005-11-29
Posts: 2,722
Website

Re: [howto] How to build a Client section on your website?

Nice how-to, thanks.

Offline

#6 2008-01-10 02:03:14

spacewalk
Member
Registered: 2007-12-18
Posts: 11

Re: [howto] How to build a Client section on your website?

Thanks, Dale! Extraordinarily generous of you.

- Ralph

Offline

#7 2008-01-10 04:19:56

iblastoff
Plugin Author
From: Toronto
Registered: 2006-06-11
Posts: 1,197
Website

Re: [howto] How to build a Client section on your website?

extremely useful! i’ve generally felt client/login type stuff using TXP was a bit overkill to do compared to other CMS’s with more built-in functionality but this guide will definitely make me less lazy to use TXP for login-type future needs.

Last edited by iblastoff (2008-01-10 04:20:14)

Offline

#8 2008-01-10 08:05:55

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: [howto] How to build a Client section on your website?

Yes, great write-up, Dale. I’ll give it a spin asap.


TXP Builders – finely-crafted code, design and txp

Offline

#9 2008-01-10 16:50:10

hakjoon
Member
From: Arlington, VA
Registered: 2004-07-29
Posts: 1,634
Website

Re: [howto] How to build a Client section on your website?

I put a link to this up on Textbook’s Tutorials page . If that’s cool I’d love to port it over to the wiki markup when I get some time or finally get off my ass and investigate the Textile formatting options.

Last edited by hakjoon (2008-01-10 16:50:35)


Shoving is the answer – pusher robot

Offline

#10 2008-01-10 17:29:23

mrdale
Member
From: Walla Walla
Registered: 2004-11-19
Posts: 2,215
Website

Re: [howto] How to build a Client section on your website?

If that’s cool I’d love to port it over to the wiki markup when I get some time or finally get off my ass and investigate the Textile formatting options.

Hak> No Problem. Let me know if I can help, also…

Anyone> Gocomm and someone else on the irc channel talked about removing, simplifying some unnecessary markup, and perhaps lightening the plugin load. I’m all for it. So if you see ways to streamline, have at it.

Also: Anyone wanna tell me the best way to add some linked screenie thumbnails, via textile? see above

Last edited by mrdale (2008-01-10 18:27:21)

Offline

#11 2008-01-12 11:53:59

iblastoff
Plugin Author
From: Toronto
Registered: 2006-06-11
Posts: 1,197
Website

Re: [howto] How to build a Client section on your website?

ooh screenshots and everything! thanks a lot dale.

Offline

#12 2008-01-18 22:44:43

instantok
Member
Registered: 2004-08-10
Posts: 20

Re: [howto] How to build a Client section on your website?

quick note. if you are copying and pasting from the provided html to create your forms the comments could create some parsing errors stopping subsequent data from showing up. removing the comments fixed everything for me.

btw. thanks for the tutorial! works great!

Offline

Board footer

Powered by FluxBB