Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
14 posts Page 1 of 2
Hi guys!

There are posts in the forum stating that member module isn't compatible with the commenting system, so it's not possible to show member's name and avatar along with his comment. This is probably true, but I never tested it.
However, experimenting with the member module in the last weeks, I thought I'll should give a try to create "my own" commenting system, as databound forms can be used to submit content from the front end, and displaying submitted content is as easy as listing pages. The only challenge was to connect things together in order to display the correct comments for pages and correct avatar for the member who submitted the comment.
That's what I got so far:
1. We have to create a template for submitting comments, let's call it comments.php, with at least 3 editable region (I used a 4th too, member_name).
Code: Select all
<cms:template title='Comments' clonable='1'>
   <cms:editable name='member_id' required='1' type='text' />
   <cms:editable name='member_name' required='1' type='text' />
   <cms:editable name='comment' required='1' type='textarea' />
   <cms:editable name='page_id' required='1' type='text' />
</cms:template>

2. Create one HTML file for posting comments: post-comment.html and place it into your snippet folder.
Code: Select all
<h3>POST YOUR COMMENT</h3><br>
   <div class="body">
        <cms:set submit_success="<cms:get_flash 'submit_success' />" />
        <cms:if submit_success >
            <div class="alert-success"><p><strong>Success:</strong> Your comment has been submitted successfully.</p></div>
        </cms:if>
           
   <cms:pages masterpage=k_member_template id=k_member_id>
                <cms:set my_member_name=k_page_title 'global' />
      <cms:set my_member_id=k_member_id 'global' />
        </cms:pages>
      
                <cms:set my_page_id=k_page_id 'global' />
       
      <cms:form
            masterpage='comments.php'
            mode='create'
            enctype='multipart/form-data'
            method='post'
            anchor='0'
            >
            <cms:if k_success >
                <cms:db_persist_form
                    _invalidate_cache='0'
                    _auto_title='1'
                    member_name=my_member_name
          member_id=my_member_id
          page_id=my_page_id
                />
               
                <cms:if k_success >
                    <cms:set_flash name='submit_success' value='1' />
                    <cms:redirect k_page_link />
                </cms:if>
            </cms:if>
           
            <cms:if k_error >
                <div class="alert alert-danger"><strong>Error:</strong>
                    <cms:each k_error >
                        <br><cms:show item />
                    </cms:each>
                </div>
            </cms:if>
           
         <div class="form-group <cms:if k_error_comment >has-error</cms:if>">
            <label class="control-label" for="comment">Comment <span class="required">*</span></label><br>
            <cms:input class="form-control" id="comment" name="comment" type='bound' value="" style="width:340px;" />
         </div>
           
            <cms:if "<cms:not submit_success />" >
                <input type="submit" name="submit" value="Submit"/>
            </cms:if>
           
   </cms:form>
</div>

3. Create one HTML file for listing comments: list-comment.html and place it into your snippet folder.
Code: Select all
<h3>COMMENTS</h3>
<cms:set my_news_id=k_page_id 'global' />
<div>         
   <cms:pages masterpage='comments.php' custom_field="page_id==<cms:show my_news_id />">
   <div>
      <cms:set mymember_id=member_id 'global' />
         <cms:if k_member_logged_in >
               <cms:pages masterpage=k_member_template id="<cms:show mymember_id />">
               <div id="about_pic"><!-- Start about_pic -->
                     <cms:show_securefile 'avatar' >
                         <cms:if file_is_image >
                             <a href="<cms:cloak_url link=file_id />"><img src="<cms:cloak_url link=file_id thumbnail='1' />" /></a><br />

                         <cms:else />
                             <a href="<cms:cloak_url link=file_id />"><cms:show file_name /></a> (<cms:size_format file_size />)
                         </cms:if>
                     </cms:show_securefile>
               </div><!-- End about_pic -->
                           </cms:pages>
         </cms:if>
      <div id="about_right">
         <h2><cms:show member_name /> at <cms:show k_page_date/></h2>
         <p><cms:show comment /></p>
      </div>
   </div>
   </cms:pages>
</div>

4. Embed the 2 html files into the template from which you want to allow posting the comments
Code: Select all
<cms:embed 'post-comment.html' />
<cms:embed 'list-comment.html' />

That's it! Of course it can be improved with moderation and other stuff, but in this stage it's doing the job. In one of the next days I'll probably implement the moderation too.
Hello!
I've come across this, too. I found _auto_title='1' not useful and using [page title - member name] in one of test projects. Also a nice feature is to make an editable "admin_answer" and check if admin is logged on, then create a "databound in databond" accessed only by admin to answer comments.
Also I made the e-mail notifications and date differences (like "answered 10 days 1 hours 10 minutes ago").
Maybe these ideas will be useful for your module!
Good job! Thanks for sharing!

But you could remove this code:

Code: Select all
<cms:pages masterpage=k_member_template id=k_member_id>
      <cms:set my_member_name=k_page_title 'global' />
      <cms:set my_member_id=k_member_id 'global' />
</cms:pages>

And put it this way in form:

Code: Select all
<cms:db_persist_form
          _invalidate_cache='0'
         _auto_title='1'
          member_name=k_member_title
          member_id=k_member_id
          page_id=my_page_id
/>
@Musman: Thank you for your ideas, a complete comment system must have all that you have mentioned in your post. Any chance to see your admin answer and email notification solutions posted here? ;)

@RafaelNC: Thanks & you're welcome! :D I think this community has a lot of capable members who works on various projects, more or less complex, but developing solutions which may be useful for others too, and would be nice of them if they would share those solutions with the couch community.
Also, thanks for your suggestion, I'll remove the unnecessary markup.
Thanks for sharing! I'm planning on using this as a "notepad" function on my website (only comments of the current user will show.) Once finished I will share my version of the code.
I created a mode of replies the comments. Now I'm trying to create notifications via email.

In the final version will be possible to use the sites with the module members and site with normal users.

If someone want to help me, I appreciate :)
The version with replies:

http://couchteste.url.ph/index.php?p=8#post

I used 2 files, index.php and the comments.php.

comments.php:

Code: Select all
<?php require_once('couch/cms.php'); ?>
<cms:template title='Comments' clonable='1'>
   <cms:editable name='user_level' type='text' />
   <cms:editable name='user_name' type='text' />
   <cms:editable name='user_email' type='text' />
   <cms:editable name='comment' type='textarea' />
   <cms:editable name='page_id' type='text' />
   <cms:editable name='reply_to' type='text' />
</cms:template>
<?php COUCH::invoke(); ?>


index.php:

Code: Select all
<?php require_once('couch/cms.php'); ?>
<cms:template title='Home' order='1' clonable='1' />
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body onload="reply(0);">
   <div class="container">
       <h3>COMMENTS</h3>
      <cms:set my_page_id=k_page_id 'global' />

      <cms:pages masterpage='comments.php' custom_field="page_id==<cms:show k_page_id /> | reply_to==0" order='asc'>
      <div class="row">
         <div class="col-md-12">
            <h5><cms:show user_name /> at <cms:show k_page_date/></h5>
            <p><cms:show comment /></p>
            <a href="#post" onclick="reply(this.id);" id="<cms:show k_page_id />">Reply</a>
            
            <cms:pages masterpage='comments.php' custom_field="page_id==<cms:show my_page_id /> | reply_to=<cms:show k_page_id />" order='asc'>
               <div class="col-md-1"></div>
               <div class="col-md-11">
                  <h5><cms:show user_name /> at <cms:show k_page_date/></h5>
                  <p><cms:show comment /></p>
                  <a href="#post" onclick="reply(this.id);" id="<cms:show k_page_id />">Reply</a>
                     
                  <cms:pages masterpage='comments.php' custom_field="page_id==<cms:show my_page_id /> | reply_to=<cms:show k_page_id />" order='asc'>
                     <div class="col-md-2"></div>
                     <div class="col-md-10">
                        <h5><cms:show user_name /> at <cms:show k_page_date/></h5>
                        <p><cms:show comment /></p>
                        <a href="#post" onclick="reply(this.id);" id="<cms:show k_page_id />">Reply</a>
                        
                        <cms:pages masterpage='comments.php' custom_field="page_id==<cms:show my_page_id /> | reply_to=<cms:show k_page_id />" order='asc'>
                           <div class="col-md-3"></div>
                           <div class="col-md-9">
                              <h5><cms:show user_name /> at <cms:show k_page_date/></h5>
                              <p><cms:show comment /></p>
                              <a href="#post" onclick="reply(this.id);" id="<cms:show k_page_id />">Reply</a>
                              <cms:set last_reply=k_page_id 'global' />
                              
                              <cms:pages masterpage='comments.php' custom_field="page_id==<cms:show my_page_id /> | reply_to=<cms:show k_page_id />" order='asc'>
                                 <div class="col-md-4"></div>
                                 <div class="col-md-8">
                                    <h5><cms:show user_name /> at <cms:show k_page_date/></h5>
                                    <p><cms:show comment /></p>
                                    <a href="#post" onclick="reply(this.id);" id="<cms:show last_reply />">Reply</a>
                                 </div>
                              </cms:pages>
                           </div>
                        </cms:pages>
                     </div>
                  </cms:pages>
               </div>
            </cms:pages>
         </div>
      </div>
      </cms:pages>
      
      
      <h3 id="post">POST YOUR COMMENT</h3><br>
      <div class="col-md-12">
         <cms:set submit_success="<cms:get_flash 'submit_success' />" />
         <cms:if submit_success >
            <div class="alert-success"><p><strong>Success:</strong> Your comment has been submitted successfully.</p></div>
               <cms:php>
                  $emails = array();
               
                  <cms:pages masterpage='comments.php' custom_field="page_id==<cms:show k_page_id />">
                     array_push($emails, '<cms:show user_email />');      
                  </cms:pages>
               
                  $emails = array_unique($emails);

                  foreach ($emails as $email) {
                     $subject = 'New comment posted';
                     $message = 'A new comment was posted on <cms:show k_page_link />';
                     $headers = 'From: webmaster@example.com' . "\r\n" .
                         'Reply-To: webmaster@example.com' . "\r\n" .
                         'X-Mailer: PHP/' . phpversion();
                     
                     mail($email, $subject, $message, $headers);
                  }
               
               </cms:php>            
         </cms:if>
   
         <cms:form
            masterpage='comments.php'
            mode='create'
            enctype='multipart/form-data'
            method='post'
            anchor='0'
         >
            <cms:if k_success >               
               <cms:db_persist_form
                  _invalidate_cache='0'
                  _auto_title='1'
                  user_level=k_user_access_level
                  page_id=my_page_id
               />
      
               <cms:set_flash name='submit_success' value='1' />
               
               <cms:redirect k_page_link />
            </cms:if>
      
            <cms:if k_error >
               <div class="alert alert-danger"><strong>Error:</strong>
                  <cms:each k_error >
                     <br><cms:show item />
                  </cms:each>
               </div>
            </cms:if>
            
            <div class="form-group">
               <label class="control-label" for="user_name">Name <span class="required">*</span></label><br>
               <cms:input class="form-control" id="user_name" name="user_name" type='bound' style="width:340px;" />
            </div>
            
            <div class="form-group">
               <label class="control-label" for="user_email">Email <span class="required">*</span></label><br>
               <cms:input class="form-control" id="user_email" name="user_email" type='bound' style="width:340px;" />
            </div>
                  
            <div class="form-group">
               <label class="control-label" for="comment">Comment <span class="required">*</span></label><br>
               <cms:input class="form-control" id="comment" name="comment" type='bound' style="width:340px;" />
            </div>
            
            <cms:input type="bound" name="reply_to" id='reply_to' value="0" class='hidden'/>
      
            <cms:if "<cms:not submit_success />" >
               <input type="submit" name="submit" value="Submit"/>
            </cms:if>
      
         </cms:form>
         <script>
            function reply(id){
                x=document.getElementById("f_reply_to")
                x.value=id
            }
            
         </script>
      </div>   
   </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
<?php COUCH::invoke(); ?>
Hi I made some small changes to your code in order to use it as a "notepad" for my site visitors.
This is what my list-comment.html looks like now:

Code: Select all
<h3>Notes</h3>
<cms:set my_news_id=k_page_id 'global' />
<div>         
   <cms:pages masterpage='members/comments.php' custom_field="page_id==<cms:show my_news_id />">
   <div>
      <cms:set mymember_id=member_id 'global' />
         <cms:if k_member_logged_in >
               <cms:pages masterpage=k_member_template id="<cms:show mymember_id />">
               <cms:set member="<cms:show  k_member_title/>"/>

   <cms:if member_name==member>
      <div id="about_right">
         <h2>at <cms:show k_page_date/></h2>
         <p><cms:show comment /></p>
      </div>
      </cms:if>
                                 </cms:pages>
         </cms:if>
         
     
   </div>
   </cms:pages>


users can only see their own comments this way.
Would it be possible to create a remove/edit function for former comments?
Saskia wrote: Would it be possible to create a remove/edit function for former comments?


Yes! To remove a comment you can use this code, it displays only one button.

Code: Select all
<cms:form method='post' anchor='0' >
   <cms:set my_action="delete_page_<cms:show k_page_id />" />
   <cms:if k_success>
      <cms:validate_nonce my_action />
      <cms:db_delete  page_id=k_page_id />
      <cms:redirect page_link />
   </cms:if>   
   <cms:input name='nonce' type='hidden' value="<cms:create_nonce my_action />" />
   <input class="btn btn-mini btn-danger" type="submit" name="submit" value="Remove"/>
</cms:form>


To change the comment is a bit more difficult. But just a little :)

You can put a button to open a page of comment (k_page_link). And inside the comment page put a form with databound.

Code: Select all
<cms:form 
   masterpage=k_template_name
   mode='edit'
   enctype='multipart/form-data'
   page_id=k_page_id
   method='post'
   anchor='0'>

   <cms:if k_success >                             
      <cms:db_persist_form />
      <cms:redirect k_page_link />
   </cms:if>
   
   <fieldset>
      <!-- inputs with type='bound' -->

      <cms:input class="btn" id="submit" type="submit" name="submit" value="Change" />
   </fieldset>
</cms:form>


Hope this helps :)
14 posts Page 1 of 2